Виправлена ​​ширина комірки таблиці


175

Дуже багато людей все ще використовують таблиці для компонування елементів керування, даних тощо - одним із прикладів цього є популярний jqGrid. Однак, трапляється якась магія, яку я не можу здатись (її таблиці для крику вголос, скільки магії це може бути?)

Як можна встановити ширину стовпців таблиці та дотримуватися її, як це робить jqGrid !? Якщо я спробую це повторити, навіть якщо я встановлюю кожну <td style='width: 20px'>, як тільки вміст однієї з цих комірок перевищує 20 пікселів, комірка розширюється!

Якісь ідеї чи ідеї?

Відповіді:


249

Ви можете спробувати використовувати <col>тег управління стилем таблиці для всіх рядків, але вам потрібно буде встановити table-layout:fixedстиль на <table>клас css або таблиці та встановити overflowстиль для комірок

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

і це ваш CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

15
col не буде працювати в html5, встановити ширину окремого td замість inline css або css класів
Pankaj Phartiyal

10
Прийнята відповідь не працює, якщо явно не застосувати ширину для потрібної таблиці. Чудово працює, використовуючи одиницю чи відсоток. Подумав, що я зазначу це, оскільки відповідь @ totymedli не отримала жодного голосу, і я не хотів, щоб користувачі ігнорували це. Однак пропозиція щодо розриву слів не потрібна, якщо це не те, до чого ви прагнете.
thebdawk05

Що станеться, якщо у вас є рядки з лише 1 елементом TD, який охоплює кілька стовпців? Використовуючи зразок коду, якби ви <TD colspan="3">самі по собі були рядом, це був би 90px?
sab669

Спасибі це допомогло. Для перекриття даних додайте це table.fixed td { word-wrap: break-word; }.
Параг Тяги

Пропозиція щодо розбиття слів не потрібна, але вона корисна для решти користувачів ЗП і цілком відповідає питанням, оскільки переповнення вмісту в таблицях із фіксованою шириною майже неминуче виникає у більшості сценаріїв.
Емі Пеллегріні

101

Тепер у HTML5 / CSS3 у нас є краще рішення проблеми. На мою думку, це суто рішення CSS рекомендується:

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

Потрібно встановити таблицю widthнавіть у розчині для переслідування . Інакше це не працює.
Крім того, нова функція , яка CSS3 VSync запропонував це: word-break:break-all;. Це також розіб'є слова без пробілів у кількох рядках. Просто змініть код таким чином:

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

Кінцевий результат

Виведений стіл


Якщо ви кинете рядок з символом a colspan, це, здається, порушує це рішення. Будь-які пропозиції щодо використання цього рішення за допомогою таблиці, що містить colspan> 1?
Ерік К

@QuantumDynamix Я виправив це, включивши в якості першого ряду рядок без крапки, просто всі окремі стовпці з шириною. Потім я сховав цей рядок з 0 висотою, облямівкою: жодної, видимістю: приховано, padding: 0px і т.д. Перший ряд з окремими клітинками фіксованої ширини встановлює ширину.
AaronLS

@totymedli Будь-які ідеї, як змусити таблицю взяти суму всіх ширин моїх стовпців? Моя таблиця генерується трохи динамічно, і тому я не можу заздалегідь обчислити ширину таблиці, але я не хочу використовувати 100%, тому що це розтягує деякі елементи.
AaronLS

14
table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

9
Ви впевнені, що можете використовувати table-layoutелемент td?
Нік

@Nick - це добре працює. Hovewer я повинен додати також властивості min-width та max-width (те саме значення, що й ширина), і тоді він став справді фіксованою шириною.
Денис Хай

11

У мене була одна довга комірка таблиці таблиці, це примусило таблицю до країв браузера і виглядало некрасиво. Я просто хотів, щоб цей стовпець був лише фіксованого розміру і ламав слова, коли він досягне вказаної ширини. Тож для мене це спрацювало добре:

<td><div style='width: 150px;'>Text to break here</div></td>

Вам не потрібно вказувати будь-який тип стилю для таблиці, елементів tr. Ви також можете використовувати переповнення: приховано; як пропонують інші відповіді, але це призводить до зникнення зайвого тексту.


2
Або ви можете використовувати максимальну ширину замість ширини, де потрібно. Це дозволить вам не порушувати текст, якщо ви не досягнете межі ширини. І у комірці таблиці не буде порожнього місця, якщо ваш текст менший за вказану ширину. <td> <div style = 'max-width: 150px;'> Текст для перерви тут </div> </td>
Тарік


0

для таблиці FULLSCREEN з шириною:

  • ширина столу ОБОВ'ЯЗКОВО бути 100%

  • якщо потрібно N Colunms, то ПОВИННІ бути N + 1

приклад для 3 стовпців:

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
    table.fixed td {
      overflow: hidden;
    }
  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>


-2
table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

: перша дитина ...: nth-дитина (1) або ...

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.