Fatal编程技术网
  • html/
  • Html 表colspan看起来不同

Html 表colspan看起来不同

html

Html 表colspan看起来不同,html,html-table,Html,Html Table,我有一个2行3列的表格，我想将colspan=2设置为1x2单元格和2x1单元格。 但输出似乎与我预期的有所不同 需要一个： 但是显示的输出： 以下是html: <!DOCTYPE HTML PUBLIC> <html> <body> <table border=1 cellpadding=0 cellspacing=0 width=100%> <tr> <td >1x1</td&

我有一个2行3列的表格，我想将
colspan=2
设置为
1x2单元格
和
2x1单元格
。 但输出似乎与我预期的有所不同

需要一个：

但是显示的输出：

以下是html:

<!DOCTYPE HTML PUBLIC>
<html>
 <body>
    <table border=1 cellpadding=0 cellspacing=0 width=100%>
    <tr>
        <td >1x1</td>
        <td COLSPAN=2>1x2</td>
    </tr>
    <tr>
        <td COLSPAN=2>2X1</td>
        <td>2x2</td>
    </tr>
    </table>
 </body>
</html>


1x1
1x2
2X1
2x2
有人能帮助我使用table和colspan实现预期的输出吗？

添加以下CSS类：

table {
    table-layout: fixed;
}

表中没有任何内容要求第二列的宽度为非零，因为其中的插槽与其他插槽共享。处理这个问题有多种方法

设置
表格布局：修复了@Danield的答案中的
，通过强制解决问题。当没有CSS或HTML表示的宽度要求时，它的算法将可用空间均匀地划分到列中。如果偶数除法是您想要的（即使您的“期望值”有所不同），这是最简单的方法

另一种方法是明确设置宽度，例如在这种情况下（请参阅）

如果你只想平均分割，这是不必要的笨拙。但是，如果希望列宽分别为25%、50%、25%，则可以使用以下选项（请参阅）：



上校{
宽度：25%；
}
列：第n个类型（2）{
宽度：50%；
}


。。。


在这种情况下，直接设置列的宽度（通过设置
col
元素的样式）比间接设置单元格的宽度（可能占用多个列）更容易


td {
  width: 33.33%;
}
td[colspan=2] {
  width: 66.67%;
}



<style>
col {
  width: 25%;
}
col:nth-of-type(2) {
  width: 50%;
}
</style>