тд ширины, не работает?

Итак, у меня есть этот код:

<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;
}

Он отлично работает на моем браузере , и я испытал его в любом браузере и макинтош и PC, но кто - то жалуется , что 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

Обратите внимание, что изменение ширины столбца в thead повлияет на всю таблицу.

<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 столбца), чтобы указать длину каждой ячейки

Я пробовал со многими решениями, но у меня это не сработало, поэтому я попробовал сгибать таблицу, и у меня все работало нормально со всеми функциями таблицы, такими как граница-коллапс и так далее, только изменение - свойство отображения

Это было мое требование 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;
}

Эта проблема довольно легко решается с помощью min-widthи max-widthв правиле CSS.

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.