Как сделать так, чтобы HTML Таблица занимала полную ширину, используя SASS / CSS - PullRequest
Новая
       71

Как сделать так, чтобы HTML Таблица занимала полную ширину, используя SASS / CSS

2 голосов
/ 29 апреля 2020

Я пытаюсь стилизовать table, используя только SASS / CSS. Я установил width моего table равным 100%. Однако, когда я устанавливаю размер шрифта элемента th на 0.8em, моя таблица не может принять всю допустимую ширину (обратите внимание, что столбцы не достигают границы справа). Как я могу это исправить, используя CSS, учитывая, что я не контролирую HTML?

enter image description here

SASS / CSS

table {
      color: black;
      background-color: white;
      border-color: black;
      border-style: solid;
      border-width: 0 1px 1px 1px;
      border-radius: 5px;
      border-collapse: collapse;
      border-spacing: 0;
      display: block;
      overflow: auto;
      width: 100%;
    
      thead {
        th {
          color: white;
          background-color: black;
          font-weight: bold;
          font-size: 0.8em;
          padding: 5px 10px;
          vertical-align: bottom;
        }
    
        th:first-child {
          border-top-left-radius: 5px;
        }
    
        th:last-child {
          border-top-right-radius: 5px;
        }
      }
    
      tbody {
        td {
          border-top: 1px solid gray;
          padding: 5px 10px;
          vertical-align: top;
        }
    
        tr:nth-child(2n) {
          background-color: lightgray;
        }
      }
    }
    <table>
      <thead>
        <tr>
          <th>Method</th>
          <th>Runtime</th>
          <th align="right">Mean</th>
          <th align="right">Ratio</th>
          <th align="right">Gen 0/1k Op</th>
          <th align="right">Allocated Memory/Op</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Baseline</td>
          <td>Clr</td>
          <td align="right">1.833 us</td>
          <td align="right">1.00</td>
          <td align="right">2.0542</td>
          <td align="right">6.31 KB</td>
        </tr>
      </tbody>
    </table>

Ответы [ 2 ]

3 голосов
/ 01 мая 2020

Вот то, что я думаю, что вы хотите, я только что удалил border-collapse, display:block (это делает таблицу по умолчанию CSS), вот кодовое поле с S CSS и рабочим фрагмент здесь тоже: 

table {
  color: black;
  background-color: white;
  border-color: black;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  border-radius: 5px;
  border-collapse: separte;
  border-spacing: 0;
  display: table;
  overflow: auto;
  width: 100%;
}
table thead th {
  color: white;
  background-color: black;
  font-weight: bold;
  font-size: 0.8em;
  padding: 5px 10px;
  vertical-align: bottom;
}
table thead th:first-child {
  border-top-left-radius: 5px;
}
table thead th:last-child {
  border-top-right-radius: 5px;
}
table tbody td {
  border-top: 1px solid gray;
  padding: 5px 10px;
  vertical-align: top;
}
table tbody tr:nth-child(2n) {
  background-color: lightgray;
}
<table>
  <thead>
    <tr>
      <th>Method</th>
      <th>Runtime</th>
      <th align="right">Mean</th>
      <th align="right">Ratio</th>
      <th align="right">Gen 0/1k Op</th>
      <th align="right">Allocated Memory/Op</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Baseline</td>
      <td>Clr</td>
      <td align="right">1.833 us</td>
      <td align="right">1.00</td>
      <td align="right">2.0542</td>
      <td align="right">6.31 KB</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 29 апреля 2020

убрать отображение: блок из таблицы 

#container,tr{
width:100%;
}

html,body{
width:100%;
}

#container{
border-radius:15px;
background-color:black;
}

table {
      color: black;
      background-color: white;
      border-color: black;
      border-style: solid;
      border-width: 0 1px 1px 1px;
      border-radius: 5px;
      border-collapse: collapse;
      border-spacing: 0;
     
      overflow: auto;
      width: 98%;
      margin:0 auto;
    }
      
        th {
          color: white;
          background-color: black;
          font-weight: bold;
          font-size: 0.8em;
          padding: 5px 10px;
          vertical-align: bottom;
        }
    
        th:first-child {
          border-top-left-radius: 5px;
        }
    
        th:last-child {
          border-top-right-radius: 5px;
        }
     
    
     
        td {
          border-top: 1px solid gray;
          padding: 5px 10px;
          vertical-align: top;
        }
    
        tr:nth-child(2n) {
          background-color: lightgray;
        }
<html>
<body>
<div id='container'>
<table>
      <thead>
        <tr>
          <th>Method</th>
          <th>Runtime</th>
          <th align="right">Mean</th>
          <th align="right">Ratio</th>
          <th align="right">Gen 0/1k Op</th>
          <th align="right">Allocated Memory/Op</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Baseline</td>
          <td>Clr</td>
          <td align="right">1.833 us</td>
          <td align="right">1.00</td>
          <td align="right">2.0542</td>
          <td align="right">6.31 KB</td>
        </tr>
      </tbody>
    </table>
   </div>
   </body>
   </html>
...