HTML CSS Как остановить расширение ячейки таблицы

Question

У меня есть таблица, составленная из содержимого, полученного из возвращенного набора данных. Я хочу, чтобы ячейка описания не расширялась более чем на 280 пикселей, независимо от длины содержимого (его строки). Я пробовал:

<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" >

Но, похоже, это не работает. Я не хочу, чтобы он был перенесен, и при этом я не хочу, чтобы отображалось более 280 пикселей.

Answer 1

Похоже, ваш синтаксис HTML неверен для ячейки таблицы. Прежде чем попробовать другую идею, приведенную ниже, убедитесь, что это работает или нет ... Вы также можете попробовать добавить это к вашей таблице: table-layout: fixed ...

<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;">
   [content]
</td>

Новый HTML

<td>
   <div class="MyClass"">
       [content]
   </div>
</td>

Класс CSS:

.MyClass{
   height: 280px; 
   width: 456px; 
   overflow: hidden;
   white-space: nowrap;
}

Answer 2

<table border="1" width="183" style='table-layout:fixed'>
  <col width="67">
  <col width="75">
  <col width="41">
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
  <tr>
    <td>Row 1</td>
    <td>Text</td>
    <td align="right">1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Abcdefg</td>
    <td align="right">123</td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td>Abcdefghijklmnop</td>
    <td align="right">123456</td>
  </tr>
</table>

Я знаю, что это старая школа, но попробуй, она работает.

может также захотеть добавить это:

<style>
  td {overflow:hidden;}
</style>

Конечно, вы бы поместили это в отдельную связанную таблицу стилей, а не в строку ... не так ли;)

Answer 3

Нет JavaScript, просто CSS. Работает отлично!

   .no-break-out {
      /* These are technically the same, but use both */
      overflow-wrap: break-word;
      word-wrap: break-word;

      -ms-word-break: break-all;
      /* This is the dangerous one in WebKit, as it breaks things wherever */
      word-break: break-all;
      /* Instead use this non-standard one: */
      word-break: break-word;

      /* Adds a hyphen where the word breaks, if supported (No Blink) */
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;

    }

Answer 4

Вы не можете контролировать ширину ячейки таблицы (td), если не поместите ее содержимое в элемент управления контейнера, как div. Следующая функция jQuery обернет содержимое каждого тд внутри div.

function WrapTableCellsWithDiv(tableId)
{
    $('#' + tableId + ' tbody tr td').each(function ()
    {
        //get corresponding th of this td
        var tdIndex = $(this).index();
        var th = $('#' + tableId + ' thead tr th:nth-child(' + (tdIndex + 1) + ')');
        var thWidth = $(th).width();

        //wrap the contents of td inside a div
        var tdContents = $(this).html();
        var divTag = '<div style="width: ' + thWidth + '">' + tdContents + '</div>';
        $(this).html(divTag);
    });
}

Эта функция обернет содержимое каждого элемента td внутри тега div. Ширина тега div будет установлена ​​равной ширине соответствующего элемента th.

Пример структуры таблицы:

<table id="SampleTable">
    <thead>
        <tr>
            <th style="width: 90px;">FirstName</th>
            <th style="width: 90px;">LastName</th>
            <th style="width: 60px;">Age</th>
            <th style="width: 70px;">Gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Smith</td>
            <td>25</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Ted</td>
            <td>Eddie</td>
            <td>22</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Angel</td>
            <td>Mike</td>
            <td>23</td>
            <td>Female</td>
        </tr>
    </tbody>
</table>

Answer 5

Это может быть полезно, так как ответ выше - просто css:

td {
    word-wrap: break-word;
}

Answer 6

Чтобы опубликовать комментарий Криса Датроу здесь как ответ:

style="table-layout:fixed;" 

в стиле самого стола это то, что у меня сработало. Спасибо Крис!

Полный пример:

<table width="55" height="55" border="0" cellspacing="0" cellpadding="0" style="border-radius:50%; border:0px solid #000000;table-layout:fixed" align="center" bgcolor="#152b47">
  <tbody>
    <td style="color:#ffffff;font-family:TW-Averta-Regular,Averta,Helvetica,Arial;font-size:11px;overflow:hidden;width:55px;text-align:center;valign:top;whitespace:nowrap;">

     Your table content here

    </td>
  </tbody>
</table>

Answer 7

Вполне возможно, если ваш код имеет достаточно относительной логики для работы.

Просто используйте единицы просмотра, хотя для некоторых математика может быть немного сложнее. Я использовал это для предотвращения раздувания элементов списка в определенных столбцах таблицы с более длинным текстом.

ol {max-width: 10vw; padding: 0; overflow: hidden;}

Очевидно, max-width на colgroup элементах выполняет , а не работу, что довольно грустно, если полностью зависеть от дочерних элементов для контроля чего-либо на родительском элементе.