我注意到 td 在所有列上都带有colspan的内容会影响其他行 td 的宽度.
I noticed that the content of a td with a colspan over all columns affects the width of the other rows td.
任何人都可以向我解释为什么会这样以及如何使它正常工作吗?我有两个要求
Can anyone please explain me why this is and how I can get this working properly? I have two requirements
- 第一行的第二列应占用尽可能多的空间(展开)
- 第二行的宽度应为100%,在示例中使用colspan = 2
注意:我正在研究一些CSS属性,并发现 word-break:break-all 可以解决此问题,但我想了解这一点和/或有更好的解决方案.
Note: I was playing around with some CSS properties and figured out word-break:break-all would fix the issue, but I would like to understand this one and/or have a better solution.
下面是带有较长文本的示例:
Here is the example with a longer text:
<table border="1"> <colgroup> <col> <col style="width:100%"> </colgroup> <tr> <td>aaaaaaaaaaaaaaaaaaaaaa</td> <td>Take as much space as possible, expand</td> </tr> <tr> <td colspan="2">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td> </tr> </table>
在这里,文本较短的结果,您现在可以看到第一行有所不同.
And here the result with a shorter text, you can see the first row is different now.
<table border="1"> <colgroup> <col> <col style="width:100%"> </colgroup> <tr> <td>aaaaaaaaaaaaaaaaaaaaaa</td> <td>Take as much space as possible, expand</td> </tr> <tr> <td colspan="2">shorter</td> </tr> </table> 推荐答案
表也许是它们中最奇怪的元素,并且在浏览器中存在历史原因,我不能说为什么只是在不同的浏览器中有所不同.
table is maybe the most odd element of them all and has historical cause issues cross browser and I can't say why it behaves different in different browser, it just does.
对于您而言,在第一个 td 上设置较小的宽度将有助于解决您的问题.
In your case, setting a small width on the first td will help solve your issue.
table { width: 100%; } <table border="1"> <colgroup> <col style="width:5%"> <col style="width:95%"> </colgroup> <tr> <td>aaaaaaaaaaaaaaaaaaaaaa</td> <td>Take as much space as possible, expand</td> </tr> <tr> <td colspan="2">looooooooooooooooooooooooooooooooooooooooooooooooong</td> </tr> </table> <table border="1"> <colgroup> <col style="width:5%"> <col style="width:95%"> </colgroup> <tr> <td>aaaaaaaaaaaaaaaaaaaaaa</td> <td>Take as much space as possible, expand</td> </tr> <tr> <td colspan="2">short</td> </tr> </table>
更多推荐
如何使colspan工作而不影响其他行的宽度
发布评论