0

Мне нужно уравнить ширину каждой ячейки

.grid {
width:100%;
color:#333;
font-family:sans-serif;
}
.grid td {
background:#eee;
border:1px solid #ccc;
padding:2px;
transition:all .5s;
}
.grid td:first-child {
border-radius:3px 0 0 3px;
}
.grid td:last-child {
border-radius: 0 3px 3px 0;
}
.grid td:hover {
background:#41B3FF;
border:1px solid #006EB8;
cursor:pointer;
color:#00426E;
}
Как сделать 3 человека равными?
<table class="grid" border="0">
  <tr>
    <td>Я бедный.</td>
    <td>Я самый богатый! А в чем причина?</td>
    <td>Я состоятелный.</td>
  </tr>
</table>

2 ответа 2

2

Используйте - table-layout: fixed; таблица делится на колонки равной ширины. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

table{
    width: 100%;
    table-layout: fixed;
    margin-bottom: 15px;
}
td{
    padding: 10px;
    border: 1px solid #ccc;
}
<table>
  <tr>
    <td>Я бедный.</td>
    <td>Я самый богатый! А в чем причина?</td>
    <td>Я состоятелный.</td>
  </tr>
</table>
<table>
  <tr>
    <td>Я бедный.</td>
    <td>Я самый богатый! А в чем причина?</td>
    <td>Я состоятелный.</td>
     <td>Я состоятелный.</td>
  </tr>
</table>

1

.grid {
width:100%;
color:#333;
font-family:sans-serif;
}
.grid td {
background:#eee;
border:1px solid #ccc;
padding:2px;
transition:all .5s;
width:33%;
}
.grid td:first-child {
border-radius:3px 0 0 3px;
}
.grid td:last-child {
border-radius: 0 3px 3px 0;
}
.grid td:hover {
background:#41B3FF;
border:1px solid #006EB8;
cursor:pointer;
color:#00426E;
}
Укажите width для td
<table class="grid" border="0">
  <tr>
    <td>Я бедный.</td>
    <td>Я самый богатый! А в чем причина?</td>
    <td>Я состоятелный.</td>
  </tr>
</table>

2
  • ха, а если у меня их больше 3x?
    – user245150
    10 июл 2017 в 21:47
  • ну мне кажется, универсального варианта тут нет. для того чтобы использовать переменные в css используются препроцессоры. 10 июл 2017 в 21:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.