为什么colspan没有按预期应用

问题描述

我有一张桌子，按照下面。第二行定义了三列，一列是 colspan = 8 ，另一列是 colspan = 1 。尽管如此，这些细胞并未根据colspan进行拉伸，第二个细胞的宽度更多一些，第三个细胞的宽度更宽一些。

 < table class =浮动simpletable> 
< tbody> 
< tr>< td colspan =10>第1行< / td>< / tr> 
< tr>< td colspan =8>第1列 - & gt; < / td>< / td>< 
< tr>< td colspan =10>第3行< / td>< / tr> 
< tr>< td colspan =1> 1st cell< / td>< td colspan =9> 4th row< / td>< / tr> 
< / tbody> 
< / table> 
  

有什么问题以及如何解决它？

解决方案

单元格的宽度取决于单元格内容，HTML和CSS设置的宽度，浏览器以及月亮的可能相位。 colspan 属性只是指定了一个单元占用了多少列（因此表格的网格有多少个槽）。

如果您看到第2行的最后一个单元格为最宽，那么原因可能是它的内容最多（或者有宽度设置）。您的演示代码不会显示出这样的行为。

如果您不希望列宽适应单元格的大小要求，请在CSS中明确设置宽度（或HTML）。在此之前，最好从表格结构中删除所有不必要的复杂情况。如果您的演示代码反映了整个结构，那么第2列到第8列是不必要的分割，即它们可以被转换为单个列。示例（为了确定而使用差的像素宽度）：

 < table class =浮动simpletableborder> 
< col width = 100>< col width = 100>< col width = 100> 
< tbody> 
< tr>< td colspan =4>第1行< / td>< / tr> 
< tr>< td colspan =2> span 1< / td>< td> span 2< / td>< td> span 3< / td>< / tr> 
< tr>< td colspan =4>第3行< / td>< / tr> 
< tr>< td> span< / td>< td colspan =3>其他span< / td>< / tr> 
< / tbody> 
< / table> 
  

如果没有这样的重写，恐怕你的表违反了HTML的表格模型没有细胞在第3列或第4列开始或...

I have a table according to below. The second row has defined three columns, one with colspan=8 and the others with colspan=1. Still, the cells are not stretched according to the colspan, the "width" are a little bit more for second cell and widest for the third.

<table class="floating simpletable">
    <tbody>
        <tr><td colspan="10">1st row</td></tr>
        <tr><td colspan="8">Column 1 -&gt; Least wide</td><td colspan="1">2nd</td><td colspan="1">3rd</td></tr>
        <tr><td colspan="10">3rd row</td></tr>
        <tr><td colspan="1">1st cell</td><td colspan="9">4th row</td></tr>
    </tbody>
</table>

What's the problem and how to fix it?

解决方案

The widths of cells depend on cell contents, HTML and CSS settings for widths, browser, and possibly phase of the moon. The colspan attribute just specifies how many columns (hence, how many slots in the grid for the table) a cell occupies.

If you see the last cell of row 2 as the widest, then the reason is probably that it has most contents (or there is a width setting for it). Your demo code does not demonstrate such behavior.

If you don’t want the column widths adjust to the size requirements of cells, set the widths explicitly in CSS (or in HTML). Before this, it is best to remove all unnecessary complications from the table structure. If your demo code reflects the entire structure, then columns 2 through 8 are an unnecessary division, i.e. they could be turned to a single column. Demonstration (with poor-style pixel widths just for definiteness):

<table class="floating simpletable" border>
    <col width=100><col width=100><col width=100>
    <tbody>
        <tr><td colspan="4">1st row</td></tr>
        <tr><td colspan="2">span 1</td><td>span 2</td><td>span 3 </td></tr>
        <tr><td colspan="4">3rd row</td></tr>
        <tr><td>span</td><td colspan="3">other span</td></tr>
    </tbody>
</table>

Without a rewrite like this, I’m afraid your table violates the table model of HTML, as currently there is no cell that starts in column 3 or column 4 or...

这篇关于为什么colspan没有按预期应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！