td ширини, не працює?

Отже, у мене тут є цей код:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

за допомогою CSS

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

Він чудово працює в моєму браузері, і я тестував його в кожному браузері, як на Mac, так і на ПК, але хтось скаржиться, що tdпри width200 з них постійно змінюється ширина. Я не уявляю, про що він говорить. Хтось знає, чому він чи вона бачать зміну ширини на td?

Вона повинна бути:

<td width="200">

або

<td style="width: 200px">

Зверніть увагу, що якщо ваша комірка містить якийсь вміст, який не вписується в 200 пікселів (наприклад, somelongwordwithoutanyspaces), комірка все одно розтягнеться, якщо ваш CSS не містить table-layout: fixedтаблиці.

РЕДАГУВАТИ

Як зазначила Крістіна Чайлдс у своїй відповіді, слід уникати як widthатрибуту, так і використання вбудованого CSS (з styleатрибутом). Це хороша практика, щоб якомога більше відокремлювати стиль та структуру.

Ширина та / або висота таблиць вже не є стандартними; як каже Янз, вони застаріли. Натомість найкращий спосіб зробити це - мати елемент блоку всередині комірки таблиці, який буде тримати комірку відкритою до потрібного розміру:

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

 <table style="table-layout:fixed;">

Це призведе до ширини стилю <td>. Якщо текст переповнює його, він перекриває інший <td>текст. Тож спробуйте використовувати медіа-запити.

Ви не можете вказати одиниці в width/ heightатрибути таблиці; вони завжди в пікселях, але використовувати їх взагалі не слід, оскільки вони застаріли.

Ви можете спробувати "table-layout: fixed;" до вашого столу

table-layout: fixed;
width: 150px;

150 пікселів або бажаної ширини.

Довідка: https://css-tricks.com/fixing-tables-long-strings/

Ви можете використовувати всередині <td>тегу css:display:inline-block

Люблю: <td style="display:inline-block">

спробуйте використовувати

word-wrap: break-word;

сподіваюся, це допоможе

спробуйте це:

word-break: break-all;

я використовую

<td nowrap="nowrap">

для запобігання обтікання Довідка: https://www.w3schools.com/tags/att_td_nowrap.asp

Зверніть увагу, що регулювання ширини стовпця в теаді вплине на всю таблицю

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>joe@email.com</td>
    </tr>
</table>

У моєму випадку ширина на thead> tr безпосередньо перевищувала ширину на table> tr> td.

Використовуйте

<table style="table-layout:fixed;">

Це примусить таблицю встановити на 100% ширину. Потім використовуйте цей код

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(ідентифікатор таблиці - dataTable і має 3 стовпці), щоб вказати довжину кожної комірки

Я пробував із багатьма рішеннями, але це не спрацьовувало для мене, тому я спробував згинати таблицю, і це добре працювало для мене з усіма функціональними можливостями таблиці, такими як граничне згортання та інше, лише зміна - це властивість display

Це була моя вимога HTML

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

Мій CSS

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}

Цю проблему досить легко вирішити за допомогою правила css min-widthі max-widthв межах нього.

HTML

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

CSS

.name {
  max-width: 80px;
  min-width: 80px;
}

Це змусить перший стовпець мати ширину 80 пікселів. Зазвичай я використовую макс-ширину без мінімальної ширини для того, щоб правити в тексті, який дуже часто буває занадто довгим від створення таблиці, яка має надширокий стовпець, в основному порожній. Питання OP стосувалося встановлення фіксованої ширини, отже, обидва правила разом. У багатьох браузерахwidth:80px; CSS ігнорується для стовпців таблиці. Встановлення ширини в HTML працює, але це не так, як вам слід робити.

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

Якщо я хочу, щоб текст не загортався і не збільшував висоту рядка, але все ж дозволяв користувачеві бачити повний текст, я використовую white-space: nowrap; головне правило, а потім застосовую правило наведення, яке видаляє правила ширини та перенесення так що користувач може бачити повний вміст, коли наводить на нього курсор. Щось на зразок цього:

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

Це просто залежить від того, чого саме ви намагаєтесь досягти. Сподіваюся, це комусь допомагає. PS Окрім того, для iOS існує виправлення, коли наведення не працює - див. CSS Hover Not Working на iOS Safari та Chrome