英文:
Colspan not working in pure HTML, no CSS, applied to th/td, equally in each row
问题
我无法弄清楚为什么我的colspan不起作用。我有一个CSS解决方案，但我只是对为什么这不起作用感到困惑。第一列应该是其他列宽度的1/3，第一个th和td上使用了colspan="1"，而其他列都使用了colspan="3"。
这是一个排行榜的应用，所以第一列将包含排名（1、2、3...），需要比后续列窄得多。
当然，可以使用class="colspan-3"和class="colspan-1"以及CSS colspan-1{width:4.5%} colspan-3{width:13.5%}或者根据数学运算得出的任何值来解决这个问题...但再次强调，我只是想知道出了什么问题。
为了补充细节，因为我认为这个问题将帮助将来的某个人：
当时，我认为可以将colspan用作相对单位，基本上是通过使每列的宽度相对于其他列。我遇到的问题是每列都具有相同的单位，这只在列中的单元格中真正起作用，基本上就像Microsoft Excel中的“合并”功能一样。
<table border="2">
<thead>
<tr>
<th colspan="1">th1 colspan1</th><!-- 这里使用了colspan=1 -->
<th colspan="3">th2 colspan3</th>
<th colspan="3">th3 colspan3</th>
<th colspan="3">th4 colspan3</th>
<th colspan="3">th5 colspan3</th>
<th colspan="3">th6 colspan3</th>
<th colspan="3">th7 colspan3</th>
<th colspan="3">th8 colspan3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1">td1 colspan1</td><!-- 这里使用了colspan=1 -->
<td colspan="3">td2 colspan3</td>
<td colspan="3">td3 colspan3</td>
<td colspan="3">td4 colspan3</td>
<td colspan="3">td5 colspan3</td>
<td colspan="3">td6 colspan3</td>
<td colspan="3">td7 colspan3</td>
<td colspan="3">td8 colspan3</td>
</tr>
</tbody>
</table>
1: https://i.stack.imgur.com/DBpnL.png
英文:
I cannot figure out why my colspan isn't working. I have a CSS solution, but I am just baffled why this wouldn't work. The First column should be 1/3 the width of the other columns with colspan="1" on the first th and td, while all others have colspan="3".
The application is for a leaderboard, so the first column will contain the rank number (1, 2, 3...) and needs to be much more narrow than the subsequent columns.
Of course, it can be solved with class="colspan-3" and class="colspan-1" along with the css colspan-1{width:4.5%} colspan-3{width:13.5%} or whatever the math works out to... but again, I really just want to know what's up.
To add details, because I think this question will help someone in the future:
At the time, I thought i could use colspan as a relative unit, essentially, by making each column's width relative to the other columns. The issue I was having was that each column had the exact same unit in it all the way down. It only really works for a single cell in a column, essentially like the "merge" function in Microsoft Excel.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<table border="2">
<thead>
<tr>
<th colspan="1">th1 colspan1</th><!-- colspan=1 here -->
<th colspan="3">th2 colspan3</th>
<th colspan="3">th3 colspan3</th>
<th colspan="3">th4 colspan3</th>
<th colspan="3">th5 colspan3</th>
<th colspan="3">th6 colspan3</th>
<th colspan="3">th7 colspan3</th>
<th colspan="3">th8 colspan3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1">td1 colspan1</td><!-- colspan=1 here -->
<td colspan="3">td2 colspan3</td>
<td colspan="3">td3 colspan3</td>
<td colspan="3">td4 colspan3</td>
<td colspan="3">td5 colspan3</td>
<td colspan="3">td6 colspan3</td>
<td colspan="3">td7 colspan3</td>
<td colspan="3">td8 colspan3</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
答案1
得分: 1
感谢 @Ouroborus，我以为我疯了，但在使用HTML将近十年后，显然还有东西要学。
如果一列中的所有单元格都设置为要跨越的相同列数，如在这里定义的那样，colspan 将不起作用：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
再次感谢Ouroborus纠正了我的误解！
英文:
Thanks to @Ouroborus, I thought I was going nuts but after nearly a decade of using HTML every day apparently there are still things to be learned.
colspan won't work if all cells in a column are set to the same number of columns to span, as defined here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
Thanks again to Ouroborus for catching my misunderstanding!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论