Таблица стилей в CSS - PullRequest
Новая
       2

Таблица стилей в CSS

0 голосов
/ 17 сентября 2018

Я хочу создать таблицу без заголовка, 2 столбца, первая ячейка первой строки занимает 65% ширины таблицы, а из второй строки первая ячейка занимает 20% ширины таблицы.

Вот CSS-селектор 2 видов первого столбца: 

 #myTable > tbody > tr:nth-child(1) > td:nth-child(1)

 #myTable > tbody > tr:not(:first-child) > td:nth-child(1)

Как мне это сделать?

Редактировать: вот мое решение, и оно не сработало 

table, td {
       border: 1px solid black;
   } 

   #myTable { 
       border-collapse: collapse; 
       width: 80%; 
       table-layout: fixed; 
   } 

   #myTable > tbody > tr:nth-child(1) > td:nth-child(1) { 
       width: 70%; 
       height: 100; 
   } 

   #myTable > tbody > tr:not(:first-child) > td:nth-child(1) { 
       width: 20%; 
   }

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Я бы рекомендовал использовать классы для ячеек, которые вы хотите стилизовать. Потому что любые изменения и ваш стиль будут нарушены. 

table, tr, td {
    border: 1px solid black;
    border-collapse: collapse;
}

tr {
  display: flex;
}

.flexCell {
  flex-grow: 1;
}

.firstCell {
  width: 65%;
}

.secondCell {
  width: 20%;
}
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td class="firstCell">
            Column one
          </td>
          <td class="flexCell">
            Column two
          </td>
        </tr>
        <tr>
          <td class="secondCell">
            Column one (second row)
          </td>
          <td class="flexCell">
            Column two (second row)
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Я использовал flex-grow, чтобы другие две ячейки заполнили остальную часть таблицы.

0 голосов
/ 17 сентября 2018

Я бы воспользовался сетками, очень просто: 

.myTable {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.myTable first-row {
  grid-template-columns: 65px 35px;      
}

.myTable second-row {
  grid-template-columns: 20px 80px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...