Question 308326 in Html Question posted in
Some basic documentation can be found here.

How do you make a table with percentage width in HTML

I want to create 4 columns table 100% width
and each column has two smaller cells with 15% of the width (cella A) and second cell the rest of the space in a given column (cell B)

But it doesn’t works – cell A is much wider than 15%

Can You help me?

<table style="width: 100%;  table-layout: fixed; border: 1px solid black;">
  <tr>
    <td colspan="2" style="border: 1px solid black;width: 25%;">Kolumna 1</td>
    <td colspan="2" style="border: 1px solid black;width: 25%;">Kolumna 2</td>
    <td colspan="2" style="border: 1px solid black;width: 25%;">Kolumna 3</td>
    <td colspan="2" style="border: 1px solid black;width: 25%;">Kolumna 4</td>
  </tr>
  <tr>
    <td style="width: 15%; border: 1px solid black;">A</td>
    <td style="border: 1px solid black;">B</td>
    <td style="width: 15%; border: 1px solid black;">A</td>
    <td style="border: 1px solid black;">B</td>
    <td style="width: 15%; border: 1px solid black;">A</td>
    <td style="border: 1px solid black;">B</td>
    <td style="width: 15%; border: 1px solid black;">A</td>
    <td style="border: 1px solid black;">B</td>
  </tr>
</table>
Tags:

2

Answers


  1. 0

    Cell width is decided by first row, the cells in first row is 12.5% * 2 (colspan="2"), so the cells in other row will be 12.5% too.

    You can add flexbox or grid in second row, and modify their width as you want.

    <table style="width: 100%;  table-layout: fixed; border: 1px solid black;">
    <tr>
        <td style="border: 1px solid black;width: 25%;">Kolumna 1</td>
        <td style="border: 1px solid black;width: 25%;">Kolumna 2</td>
        <td style="border: 1px solid black;width: 25%;">Kolumna 3</td>
        <td style="border: 1px solid black;width: 25%;">Kolumna 4</td>
    </tr>
    <tr>
        <td>
            <div style="display: flex; flex-wrap: nowrap; gap: 2px;">
                <div style="width: 15%; border: 1px solid black; flex-shrink: 0;">A</div>
                <div style="border: 1px solid black; flex-grow: 1;">B</div>
            </div>
        </td>
        <td>
            <div style="display: flex; flex-wrap: nowrap; gap: 2px;">
                <div style="width: 15%; border: 1px solid black; flex-shrink: 0;">A</div>
                <div style="border: 1px solid black; flex-grow: 1;">B</div>
            </div>
        </td>
        <td>
            <div style="display: flex; flex-wrap: nowrap; gap: 2px;">
                <div style="width: 15%; border: 1px solid black; flex-shrink: 0;">A</div>
                <div style="border: 1px solid black; flex-grow: 1;">B</div>
            </div>
        </td>
        <td>
            <div style="display: flex; flex-wrap: nowrap; gap: 2px;">
                <div style="width: 15%; border: 1px solid black; flex-shrink: 0;">A</div>
                <div style="border: 1px solid black; flex-grow: 1;">B</div>
            </div>
        </td>
    </tr>
</table>
    Login or Signup to reply.
  2. 0

    If you added a colgroup and some more semantic markup specific to a table element you can move all the sizing and styling into CSS and very easily set the 15% & 10% alternating columns which your question suggests is the desired outcome.

    :root{
  --a:15%;
  --b:10%;
  --ff:monospace;
}

table{
  width:100%;
  table-layout: fixed; 
  border: 1px solid black;
  font-family:var(--ff);
}
tr:first-of-type td{width:25%}
td{border:1px solid black}
table > thead > tr:first-child td{background:silver;color:white}

colgroup col:nth-of-type(2n+1){width:var(--a);background:cornsilk}
colgroup col:nth-of-type(2n){width:var(--b);background:azure}
    <table>
  <caption>
    Hurrah, it's Christmas!
  </caption>
  <thead>
    <tr>
      <td colspan="2">Kolumna 1</td>
      <td colspan="2">Kolumna 2</td>
      <td colspan="2">Kolumna 3</td>
      <td colspan="2">Kolumna 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <colgroup>
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
      </colgroup>
      <td>A</td>
      <td>B</td>    
      <td>A</td>
      <td>B</td>
      <td>A</td>
      <td>B</td>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>    
      <td>A</td>
      <td>B</td>
      <td>A</td>
      <td>B</td>
      <td>A</td>
      <td>B</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search