TechQA.

HTML table won't make content occupy full-width

60 views Asked by At

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.

html css html-table css-tables
Original Q&A
2

There are 2 answers

0
Md. Rakibul Islam On

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>

0
cela On

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>

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-TABLE

Related Questions in CSS-TABLES

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions