Встановити постійну ширину стовпця таблиці незалежно від кількості тексту в її клітинках?

У своїй таблиці я встановив ширину першої комірки в стовпчику, який буде 100px.
Однак коли текст в одній із комірок у цьому стовпчику занадто довгий, ширина стовпця стає більше 100px. Як я можу відключити це розширення?

Я трохи погрався з нею, тому що у мене виникли проблеми з цим з'ясувати.

Ви повинні встановити ширину осередку (або thчи tdпрацював, я встановив обидва) і встановити table-layoutв fixed. Чомусь ширина комірок залишається фіксованою лише тоді, коли встановлена ​​ширина таблиці (я думаю, це нерозумно, але whatev).

Крім того, корисно встановити overflowвластивість, hiddenщоб запобігти появі зайвого тексту із таблиці.

Ви також не забудьте залишити всі межі та розміри для CSS.

Гаразд, ось що я маю:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Ось це в JSFiddle

У цього хлопця була схожа проблема: Ширина комірок таблиці - фіксація ширини, загортання / обрізання довгих слів

Дивіться: http://www.html5-tutorials.org/tables/changing-column-width/

Після тегу таблиці використовуйте елемент col. вам не потрібен закриваючий тег.

Наприклад, якщо у вас було три стовпці:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Просто додайте <div>тег всередину <td>або <th>визначте ширину всередині <div>. Це вам допоможе. Більше нічого не працює.

напр.

<td><div style="width: 50px" >...............</div></td>

Якщо вам потрібна одна руда більше стовпців фіксованої ширини, а інші стовпці мають змінити розмір, спробуйте встановити і те, min-widthі інше max-widthзначення.

Це потрібно записати у відповідний CSS

table-layout:fixed;

Що я роблю:

1. Встановіть ширину td:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. Встановіть ширину td за допомогою CSS:

   <td style="width:200px; height:50px;">

3. Знову встановіть ширину як максимальну та мінімальну за допомогою CSS:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Це звучить трохи повторюється, але це дає мені бажаний результат. Щоб досягти цього з великою легкістю, можливо, вам знадобиться помістити значення CSS у клас у своєму таблицю стилів:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

тоді:

<td class="td_size">

Розмістіть атрибут класу до будь-якого <td>ви хочете.

Я цим користувався

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

Якщо ви не хочете фіксованого макета, вкажіть клас для розміру стовпця відповідним чином.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

Це також допомагає, помістити в останню "клітинку наповнювача", шириною: авто . Це займе простір і залишить усі інші розміри, як зазначено.

Зробіть прийняту відповідь на невеликі екрани, коли менша за фіксовану ширину.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Налаштування цього:

style="min-width:100px;" 

Працювали для мене.

KAsun має правильну ідею. Ось правильний код ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Відповідно до моєї відповіді, тут також можна використовувати головку таблиці (яка може бути порожньою) та застосовувати відносну ширину для кожної комірки голови таблиці. Ширина всіх комірок у тілі таблиці буде відповідати ширині головки їх стовпців. Приклад:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Переглянути результат

Як варіант, використовуйте, colgroupяк пропонується у відповіді Хатітіна

Я використовую елемент :: after у комірці, де я хочу встановити мінімальну ширину незалежно від присутнього тексту, як це:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

Мені не потрібно встановлювати ширину на батьківському столі та не використовувати макет таблиці.

Я виявив, що відповідь KAsun працює краще, використовуючи vw замість px так:

<td><div style="width: 10vw" >...............</div></td>

Це була єдина укладка, яка мені потрібна була для регулювання ширини стовпців

Не потрібно встановлювати "fixed"- все, що вам потрібно, це налаштування, overflow:hiddenоскільки встановлена ​​ширина стовпця.