Блог

Главная - Вопросы по программированию - Строки таблицы не растягиваются во всю длину в 1-й таблице, во 2-й все в порядке

Строки таблицы не растягиваются во всю длину в 1-й таблице, во 2-й все в порядке

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

В следующем коде мои строки 1-й таблицы не растягиваются до полного, что расстраивает. В то время как 2-я таблица в порядке и растягивается, как и ожидалось. Может кто-нибудь указать мне причину и помочь ее исправить?

 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:

Удаление display: inline-block; в таблице должно решить проблему.

 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>
Метки: