Plain HTML without CSS: Colspan not working properly in th/td, consistent across all lines
P粉899950720
P粉899950720 2024-03-31 17:28:21
0
1
462

I don't understand why my colspan is not working. I have a CSS solution but I'm just confused as to why this doesn't work. The first column should be 1/3 the width of the other columns, with colspan="1" on the first column and the td, and colspan="3" on all other columns.

The application is for a leaderboard, so the first column will contain the ranking numbers (1, 2, 3...) and needs to be much narrower than subsequent columns.

Of course you can use class="colspan-3" and class="colspan-1" and css colspan-1{width:4.5%} colspan-3 {width:13.5%} to solve or any mathematical result... However, I really just want to know what's going on.

Adding 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 problem I'm having is that each column has the exact same units. It only works on individual cells in a column and is essentially similar to the "Merge" feature in Microsoft Excel.

<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>

P粉899950720
P粉899950720

reply all(1)
P粉011360903

Thanks @Ouroborus I thought I was crazy, but after almost a decade of using HTML every day, there's clearly still things to learn.

colspan will not work if all cells in the 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 discovering my misunderstanding!

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template