html表中的列数

我正在尝试创建以下html表：

我不明白为什么我当前的实现没有产生我想要的结果。正如您在代码段中看到的，第二个

中的最后一个

跨越2列，而不是中间的

表格{
宽度：100%；
}
表tr td[colspan=“4”]{
字体大小：16px；
文本对齐：居中；
背景色：#008CD1；
颜色：#fff；
}

全宽列
第1栏
第2栏
第3栏

事实上，第二个

td

跨越两列，但简单HTML表格中的列宽度取决于表格单元格的内容。如果将以下包含宽度的样式属性添加到

td

s，则其宽度将根据需要分布（即25/50/25%）： （注意：您还可以/应该将CSS类应用于那些

td

s，并为这些类创建外部CSS规则）

表格{
宽度：100%；
}
表tr td[colspan=“4”]{
字体大小：16px；
文本对齐：居中；
背景色：#008CD1；
颜色：#fff；
}

非语言技能
充满活力
手势
未通电

您可以使用带有两个选项的flexbox：

选项1

• 使用当前标记

表格{
宽度：100%
}
tr{
弹性：0.100%；
显示器：flex
}
tr：td型的第一个{
弹性：1；
背景：红色；
文本对齐：居中
}
tr:类型的最后一个td:非（：类型的第n个（2n+1））{
弹性：2；
背景：浅绿色；
文本对齐：居中
}

非语言技能
充满活力
手势
未通电

您的表无效。如果你把它放到表中，它会说：错误：由元素td建立的表第3列中没有开始的单元格。我认为你把

colspan

和

width

搞混了。并非所有列的宽度都相同，因此

colspan=2

不会使一列的宽度增加到任何其他列的两倍。如果添加的第三行有4个单元格，则

colspan=2

列将是第三行中间两列的宽度。@CodingWithSpike对不起，请澄清，

colspan=2！=colspan1*2

？你是说colspan2只是在相对于整个表的同一位置上驻留了两列任意大小的列？p、 如果这没有任何意义，我不会感到惊讶，我可以尝试重新命名它-再次-哈哈。没有被弃用。@Alohci是我的错，我真的认为是我弄错了，我已经更新了，谢谢：）如果我只使用CSS，我还需要声明colspan吗？3个不同的答案：1。）是：所有行的列数必须一致。2.）好的：如果您使顶行跨越3列，则不需要在第二行的第二行

td

中使用

colspan=“2”

。3.）您可以使用

div

元素，而不是所有的table/tr/td标记，可以使用float或

display:inline block

，其中多个div应该放在一行中。好的，很酷-感谢您的帮助。另外，你知道我对我的问题的评论的答案吗？嗯-不知道我是否理解正确。。。正如我在回答中所写，没有定义宽度的列的宽度取决于它们的内容。通常，浏览器会在水平和垂直方向上尽量利用可用空间。因此，如果一个单元格中有很多文本，下一个单元格中有一个sentenc，下一个单词，最后一个没有，第三个单元格将与该单词一样宽，第四个单元格几乎没有宽度，第一个单元格和第二个单元格的宽度将如此不同，以至于它们的高度或多或少匹配。（见下文->）带有colspan=“2”的单元格的宽度也取决于其内容，但也取决于其上下跨行的单元格内容-这是不可预测的，但如果您想节省垂直空间，则非常有用。一旦你开始定义宽度，这是一件完全不同的事情…这个答案可能需要比一行代码更多的解释，以帮助原始海报理解解决方案

 table.table td:nth-child(1) {text-align: center; font-weight: bold; width: 70px;}