Table rows is not stretching full-length in 1st Table, in 2nd it does fine

Viewed 31

In the following code, my 1st table rows are not stretching to full which is frustrating. While 2nd table is fine and stretches as expected. Can someone cite me the reason and help fix it?

body {padding: 20px;}
table {border:1px solid gray;}
.orange {background:#ffa566!important;}
.aqua {background: #aaffff!important;}
table {display:inline-block;float:left;}
tbody, thead {width:100%;}
<html>

<head>

<link rel="stylesheet" src="<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />

</head>

<body>

<h1>Lok Sabha</h1>

<h3>2019</h1>

<table class="table table-striped" style="width:500px">
    <thead>
    <tr><th>#</th><th>Party</th><th>Seats</th></tr>
    </thead>
    <tbody>
    <tr class="orange"><td>1</td><td>BJP</td><td>303</td></tr>
    <tr class="orange"><td>2</td><td>Shiv-Sena</td><td>18</td></tr>
    <tr class="orange"><td>3</td><td>JD(U)</td><td>14</td></tr>
    <tr class="orange"><td>4</td><td>LJP</td><td>6</td></tr>
    <tr><td>5</td><td>Akali-Dal</td><td>2</td></tr>
    <tr><td>6</td><td>Apna-Dal</td><td>2</td></tr>
    <tr><td>7</td><td>Jharkhand Student Union</td><td>2</td></tr>
    <tr><td>8</td><td>AIDMK</td><td>1</td></tr>
    <tr><td>9</td><td>Loktantrik-Party (Hanuman Beniwal)</td><td>1</td></tr>
    <tr><td>10</td><td>Democratic-Progressive-Party (Nagaland)</td><td>1</td></tr>
    <tr><td>11</td><td>People-Party (Meghalay-Manipur)</td><td>1</td></tr>
    </tbody>
</table>

<table class="table table-striped" style="width:500px">
    <tr><th>#</th><th>Party</th><th>Seats</th></tr>
    <tr class="aqua"><td>1</td><td>Congress</td><td>52</td></tr>
    <tr class="aqua"><td>2</td><td>DMK (Karunanidhi)</td><td>23</td></tr>
    <tr class="aqua"><td>3</td><td>NCP (Sharad-Pawar)</td><td>5</td></tr>
    <tr><td>4</td><td>National-Conference (farooq-abdulla)</td><td>3</td></tr>
    <tr><td>5</td><td>Indian Union Muslim League - Kerela</td><td>3</td></tr>
    <tr><td>6</td><td>Janata-Dal(Secular) - Dewegowda/Karnataka</td><td>1</td></tr>
    <tr><td>7</td><td>Jharkhand Mukti Morcha</td><td>1</td></tr>
    <tr><td>8</td><td>Revolutionary Socialist Party - left-winged/ socialist/ W.Bengal</td><td>1</td></tr>
    <tr><td>9</td><td>Kerela-Congress[M] - Chrisitan/Kerela/5mla-seats</td><td>1</td></tr>
    <tr><td>10</td><td>VCK (Tamil Panther Party) -Supports LTTE/dalit-tamil-support/tamil-nationalism</td><td>1</td></tr>
</table>

</body>

</html>

1 Answers

Remove display: inline-block; in table should solve the issue.

body {
  padding: 20px;
}

table {
  border: 1px solid gray;
}

.orange {
  background: #ffa566 !important;
}

.aqua {
  background: #aaffff !important;
}

table {
  float: left;
}

tbody,
thead {
  width: 100%;
}
<h1>Lok Sabha</h1>

<h3>2019</h1>

  <table class="table table-striped" style="width:500px">
    <thead>
      <tr>
        <th>#</th>
        <th>Party</th>
        <th>Seats</th>
      </tr>
    </thead>
    <tbody>
      <tr class="orange">
        <td>1</td>
        <td>BJP</td>
        <td>303</td>
      </tr>
      <tr class="orange">
        <td>2</td>
        <td>Shiv-Sena</td>
        <td>18</td>
      </tr>
      <tr class="orange">
        <td>3</td>
        <td>JD(U)</td>
        <td>14</td>
      </tr>
      <tr class="orange">
        <td>4</td>
        <td>LJP</td>
        <td>6</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Akali-Dal</td>
        <td>2</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Apna-Dal</td>
        <td>2</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Jharkhand Student Union</td>
        <td>2</td>
      </tr>
      <tr>
        <td>8</td>
        <td>AIDMK</td>
        <td>1</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Loktantrik-Party (Hanuman Beniwal)</td>
        <td>1</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Democratic-Progressive-Party (Nagaland)</td>
        <td>1</td>
      </tr>
      <tr>
        <td>11</td>
        <td>People-Party (Meghalay-Manipur)</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>

  <table class="table table-striped" style="width:500px">
    <tr>
      <th>#</th>
      <th>Party</th>
      <th>Seats</th>
    </tr>
    <tr class="aqua">
      <td>1</td>
      <td>Congress</td>
      <td>52</td>
    </tr>
    <tr class="aqua">
      <td>2</td>
      <td>DMK (Karunanidhi)</td>
      <td>23</td>
    </tr>
    <tr class="aqua">
      <td>3</td>
      <td>NCP (Sharad-Pawar)</td>
      <td>5</td>
    </tr>
    <tr>
      <td>4</td>
      <td>National-Conference (farooq-abdulla)</td>
      <td>3</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Indian Union Muslim League - Kerela</td>
      <td>3</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Janata-Dal(Secular) - Dewegowda/Karnataka</td>
      <td>1</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Jharkhand Mukti Morcha</td>
      <td>1</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Revolutionary Socialist Party - left-winged/ socialist/ W.Bengal</td>
      <td>1</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Kerela-Congress[M] - Chrisitan/Kerela/5mla-seats</td>
      <td>1</td>
    </tr>
    <tr>
      <td>10</td>
      <td>VCK (Tamil Panther Party) -Supports LTTE/dalit-tamil-support/tamil-nationalism</td>
      <td>1</td>
    </tr>
  </table>

Related