Как сделать так, чтобы тд заполнил всю строку в таблице без colspan - PullRequest
Новая
       4

Как сделать так, чтобы тд заполнил всю строку в таблице без colspan

0 голосов
/ 30 апреля 2018

У меня проблема, это мой код: 

<table class="table table-striped">
    <thead class="thead-dark">
        <tr>
            <th colspan="9" style="text-align: center">Main Header</th>
        </tr>
    </thead>
    <tr>
        <th>checkbox</th>
        <th>columna 1</th>
        <th>columna 2</th>
        <th>columna 3</th>
        <th>columna 4</th>
        <th>columna 5</th>
        <th>columna 6</th>
        <th>columna 7</th>
        <th>columna 8</th>
        <th>columna 9</th>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>coso 1</td>
        <td>coso 2</td>
        <td>coso 3</td>
        <td>coso 4</td>
        <td>coso 5</td>
        <td>coso 6</td>
        <td>coso 7</td>
        <td>coso 8</td>
        <td>coso 9</td>
    </tr>
    <tr>
        <th></th>
        <th>columna 1</th>
        <th>columna 2</th>
        <th>columna 3</th>
        <th>columna 4</th>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>coso 1</td>
        <td>coso 2</td>
        <td>coso 3</td>
        <td>coso 4</td>
    </tr>
</table>

Я использую Bootstrap, проблема в том, что четвертая и пятая строки короче остальных, я хочу сделать так, чтобы эти td заполняли всю ширину без colspan, потому что строки приходят с сервера, и я не Не знаю, сколько пришло, я знаю только, что наибольшее количество столбцов - 9, я пытаюсь заполнить всю ширину, чтобы не было пустого пространства справа от более коротких строк.

1 Ответ

0 голосов
/ 30 апреля 2018

используйте эту CSS 

<style>
  table.table.table-striped {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  text-align: left;
 }
  table.table.table-striped thead {
   width:  100%;
  }

 table.table.table-striped thead th, table.table.table-striped thead tr {
width:  100%;
display:  block;
}

table.table.table-striped tbody th,table.table.table-striped tbody td {
min-width: 100px;
}

 table.table.table-striped tbody tr {
display: block;
 }

table.table.table-striped tbody th:last-child, table.table.table-striped 
  tbody td:last-child {
  width: 100%;
}</style>
...