Блог

Главная - Вопросы по программированию - Как настроить разные столбцы в таблице на разную ширину в css?

Как настроить разные столбцы в таблице на разную ширину в css?

#html #css

#HTML #css

Вопрос:

Есть таблица, которая содержит 3 столбца. Теперь я хочу установить ширину первого столбца 100 пикселей, второго столбца 200 пикселей и последнего столбца 300 пикселей.
Неудобно устанавливать все td с идентификатором, который указывает, какие это столбцы.
Есть ли более разумный способ сделать?

Комментарии:

1. Вы пробовали использовать элемент: селектор last-child {…}?

Ответ №1:

Предполагая, что ваша таблица имеет стандартную разметку, вы можете использовать nth-child или nth-of-type для таргетинга на определенные ячейки в каждой строке. Вы можете заменить любое число на nth-child , если в вашей таблице больше столбцов.

 /* nth-child(1) = the first td in each tr */
td:nth-child(1) {
  width: 100px;
  background: #ddd;
  }

/* the second */
td:nth-child(2) {
  width: 200px;
  background: #ccc;
}

/* the third */
td:nth-child(3) {
  width: 300px;
  background: #bbb;
 }  
 <table>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
     </tr>
    </tbody>
  </table>

Ответ №2:

Вы можете сделать это в CSS, используя nth-child:

 #myTable tr td {
  border: 1px solid #000;
}

#myTable tr td:first-child {
  width: 100px;
}
#myTable tr td:nth-child(2) {
  width: 200px;
}
#myTable tr td:last-child {
  width: 300px;
}  
 <table id="myTable">
<tr>
  <td>100px</td>
  <td>200px</td>
  <td>300px</td>
</tr>
</table>

Если есть более 3 столбцов, вы можете просто указать nth-child (x)..

Ответ №3:

Для этого вы можете использовать nth-child :

 table tr td {
  padding:0;  
}
table tr td:nth-child(1) {
  width:100px;
}
table tr td:nth-child(2) {
  width:200px;
}
table tr td:nth-child(3) {
  width:300px;
}  
 <table>
  <tr>
    <td>100px</td>
    <td>200px</td>
    <td>300px</td>
  </tr>
</table>

Подсказка: столбцы шире, чем определенная ширина в CSS, потому что есть заполнение ячеек по умолчанию. Чтобы удалить заполнение, вы можете использовать дополнительное правило CSS (в этом примере правило table tr td ).