html table column width

Question

How to fix bottom column ? Width 50% not really working. I want to do 2 row and 3 row bottom same width.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <td style="width:50%;">Cell A</td>
    <td style="width:50%;">Cell B</td>
  </tr>
    <tr>
    <td>Cell A</td>
    <td>Cell B</td>
    <td>Cell B</td>
  </tr>
</table>

</body>
</html>

I think you need to fix the question. You are mixing up Rows with Columns. Rows are horizontal and Columns are vertical. I think your question is, "How do i get 2 Column Headers and Rows with 3 Columns?" Is this correct? — Sari Rahal
– Sari Rahal, Commented Oct 17, 2018 at 21:11
Not possible with simple html table. Firstly you have to use colspan attribute to span a column to multiple columns but that does not give desired result either. You'd have to use nested tables or use CSS with divs. — Nawed Khan
– Nawed Khan, Commented Oct 17, 2018 at 21:18

tao · Accepted Answer · 2018-10-17 21:30:03Z

Table columns are inter-connected. So that if you place some content that forces a cell to grow wider, the entire column grows wider.

That means that all rows must have the same number of cells. However, you can merge 2 or more cells by using colspan attribute.

If you want to have 2 columns on one row and 3 columns on others, you probably want to set 6 cells and use colspan in both cases:

td {
  border: 1px solid #eee;
  text-align: center;
}

<table style="width: 100%;">
  <tr>
    <td colspan="3" style="width:50%;">Cell A</td>
    <td colspan="3" style="width:50%;">Cell B</td>
  </tr>
  <tr>
    <td colspan="2">Cell A</td>
    <td colspan="2">Cell B</td>
    <td colspan="2">Cell C</td>
  </tr>
</table>

I made them 6 columns as it's easier to visualize. But, in reality the 2 columns on each side can be merged, as they are always colspan-ed together:

td {
  border: 1px solid #eee;
  text-align: center;
}

<table style="width: 100%;">
  <col width="33.3333%">
  <col width="16.6667%">
  <col width="16.6667%">
  <col width="33.3333%">
  <tr>
    <td colspan="2">Cell A</td>
    <td colspan="2">Cell B</td>
  </tr>
  <tr>
    <td>Cell A</td>
    <td colspan="2">Cell B</td>
    <td>Cell C</td>
  </tr>
</table>

zer00ne · Accepted Answer · 2018-10-17 21:13:25Z

1

Use colspan='2' on first row second column.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <td style="width:50%;">Cell A</td>
    <td colspan='2' style="width:50%;">Cell B</td>
  </tr>
    <tr>
    <td>Cell A</td>
    <td>Cell B</td>
    <td>Cell B</td>
  </tr>
</table>

</body>
</html>

answered Oct 17, 2018 at 21:13

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

Comments

MichaelvE · Accepted Answer · 2018-10-17 21:22:08Z

0

You can use colspan to tell the browser how many columns to want a cell to occupy:

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <table width="100%">
    <tr>
      <td>Cell A</td>
      <td colspan="2">Cell B</td>
    </tr>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
      <td>Cell B</td>
    </tr>
  </table>

</body>

</html>

answered Oct 17, 2018 at 21:22

MichaelvE

2,5682 gold badges12 silver badges18 bronze badges

Collectives™ on Stack Overflow

html table column width

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related