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

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

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

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

Ответ 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;
}

Ответ 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>

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

Ответ 3

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

Ответ 4

Нет 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;

    }

Ответ 5

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

td {
    word-wrap: break-word;
}