CODEWITHSUNDEEP
htmlhtml-table
Sushil Kumar Jain
Sushil Kumar Jain

Reputation: 97

html table colspan not working as expected

HTML concepts are so terrible sometimes.

This is my code using colspan in html table, and doesn't look as I expect.

<table border="1">
  <tr>
    <td colspan="3">a</td>
  </tr>
  <tr>
    <td colspan="2">b</td>
    <td>c</td>
  </tr>
</table>

What I want is: cell 'a' should look 3 cell wide, cell 'b' should look 2 cell wide, cell 'c' should look 1 cell wide.

What it is doing is: cell 'a' is 2 cells wide, cell 'b' & 'c' is 1 cell wide.

Any Suggestions thanks.

Upvotes: 6

Views: 24609

Answers (3)

Om_16
Om_16

Reputation: 686

You have already answered your question as your code is working fine but your max count is only 2. If you add another row you can see the desired results.

table {
  width: 300px;
]
<table border="1">
  <tr>
    <td colspan="3">column 1</td>
  </tr>
  <tr>
    <td colspan="2">column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column n</td>
    <td>column n</td>
    <td>column n</td>
  </tr>
</table>

table {
 width: 200px;
}
<table border="1">
  <tr>
    <td>column</td>
    <td>column</td>
    <td>column</td>
  </tr>
  <tr>
    <td colspan="3">column 1</td>
  </tr>
  <tr>
    <td colspan="2">column 2</td>
    <td>column 3</td>
  </tr>
</table>

Your code will show the desired result just as you will add another row!!!

Upvotes: 1

s3c
s3c

Reputation: 1861

So colspans do exactly what they're intended for. There are n columns in the table and each table cell <td> is one column wide. Using colspan spans the cell over more columns. This has nothing to do to each column's width.

If you wish for all columns to be of the same width, you have to use some styling.

Even though it might be easier to use some CSS grid, a solution for table is as follows:

/* You can make a separate file where you calculate n dynamically and you just
 * link the file with :root { ... } into html <head> */
:root {
  --n: 3; /*number of columns */
}
div {
  /* container for mobile because max-width only works on block elements */
  width: 30em;
  max-width: 100%;
}
table {
  /* table takes the whole container */
  width: 100%;
}
/* the following is enough for this example */
/* td:not([colspan]) {
  width: calc(100% / var(--n));
} */

/* if you don't have any (or well enough placed) table cells without colspan
 * attribute, then you have to calculate each possibilty like so: */
td {
  width: calc(100% / var(--n));
}
td[colspan="2"] {
  width: calc(100% * 2 / var(--n));
}
td[colspan="3"] {
  width: calc(100% * 3 / var(--n));
}
/* and so forth up to maximum possible n */
<div>
  <table border=1>
    <tr>
      <td colspan=2>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td colspan=3>c</td>
    </tr>
  </table>
</div>

Upvotes: 0

Lahiru Jayakody
Lahiru Jayakody

Reputation: 5410

Attribute colspan determines how many columns a cell overlaps with respect to other cells, not the absolute size of those columns. In your case, span 2 has two spans. how you can say it is not? don't judge it by width of a cell. span is not the width. You have to add another smaller columns to appear it as a column of two spans.

See the solution for your expectation in code snippet last example.

<h3>Example 1</h3>

<table border="1">
    <tr><td>col1</td><td>col2</td><td>col3</td></tr>
    <tr><td colspan="3">a</td></tr>
    <tr><td colspan="2">b</td><td colspan="1">c</td></tr>
</table>

<h3>Example 2</h3>

<table border="1">
    <tr><td width="80px">wide col1</td><td>col2</td><td>col3</td></tr>
    <tr><td colspan="3">span 3</td></tr>
    <tr><td colspan="2">span 2</td><td colspan="1">span 1</td></tr>
</table>

<h3>Your case</h3>

<table border="1">
    <tr><td colspan="3">span 3</td></tr>
    <tr><td colspan="2" width="66%">span 2</td><td width="33%">span 1</td></tr>
</table>

Upvotes: 6

Related Questions