HTML table won't make content occupy full-width

Kotynho
September 19, 2023
144 views
0 votes
2 Answers

I have made this table that holds html elements inside:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table style="width: 100%; border: #000 solid 1px">
        <tr>
            <th>Table 1</th>
            <th>Table 2</th>
            <th>Table 3</th>
        </tr>
        <tr>
            <td>
                <table style="border: #000 solid 1px;">
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Occupation</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>
            </td>
            <td>
                <table style="border: #000 solid 1px;">
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Occupation</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>
            </td>
            <td>
                <table style="border: #000 solid 1px;">
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Occupation</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

I want the 3 tables to be equally increased so the occupy full size of the table element, in the right side of the image you can see that the table is not fully occupied.

The border marks the space that the table element occupies (to occupy full-width I’ve set width to 100%). As you can see the content doesn’t get distributed to occupy the table element, what can I do to make the content to be in full width of the table element?

I’ve tried to set the table element width to 100% but just the table element got stretched to the page width, the content stayed the same.

Answers

A table doesn’t necessarily takes 100% of the width so you have to assign the width to the child tables as well.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table style="width: 100%; border: #000 solid 1px">
        <tr>
            <th>Table 1</th>
            <th>Table 2</th>
            <th>Table 3</th>
        </tr>
        <tr>
            <td>
                <table style="width: 100%; text-align: center; border: #000 solid 1px;">
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Occupation</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>
            </td>
            <td>
                <table style="width: 100%; text-align: center; border: #000 solid 1px;">
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Occupation</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>
            </td>
            <td>
                <table style="width: 100%; text-align: center; border: #000 solid 1px;">
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Occupation</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Using tables for layout is discouraged for several reasons, such as limited responsiveness, difficulty with maintenance, and poor accessibility. Instead, Flexbox or Grid are recommended.

Below is an example using Flexbox to make your layout more responsive:

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #000;
}

.flex-item {
  flex: 1 0 calc(33.333% - 20px);
  border: 1px solid #000;
  margin: 10px;
  padding: 10px;
}

.inner-table {
  width: 100%;
  border-collapse: collapse;
}

.inner-table th,
.inner-table td {
  border: 1px solid #000;
  padding: 5px;
}

@media screen and (max-width: 768px) {
  .flex-item {
    flex-basis: calc(50% - 20px);
  }
}

@media screen and (max-width: 480px) {
  .flex-item {
    flex-basis: 100%;
  }
}

<div class="flex-container">
  <div class="flex-item">
    <table class="inner-table">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Occupation</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </div>
  <div class="flex-item">
    <table class="inner-table">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Occupation</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </div>
  <div class="flex-item">
    <table class="inner-table">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Occupation</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.