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


96

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

<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?


Итак, как мы можем помочь, когда мы еще меньше понимаем, о чем идет речь? Мы не можем даже протестировать реальную страницу, и у нас нет информации о человеке и его или ее среде просмотра.
Jukka K. Korpela

Ответы:


125

Должен быть:

<td width="200">

или

<td style="width: 200px">

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

РЕДАКТИРОВАТЬ

Как отметила в своем ответе Кристина Чайлдс, вам следует избегать как widthатрибута, так и использования встроенного CSS (с styleатрибутом). Рекомендуется как можно больше разделять стиль и структуру.


Спасибо, bfavaretto ... попробую сейчас
user979331

47
должен быть стол<table style="table-layout:fixed;">
user979331

3
@ user1193385, да вот и все. Но по возможности избегайте использования встроенного CSS.
bfavaretto

4
встроенный CSS - плохая идея, если он вам действительно не нужен только в одном месте. Кроме того, ширина td в течение некоторого времени обесценилась. см. ответ ниже
Кристина Чайлдс

2
@kristinachilds Согласен. В своем примере я использовал встроенный CSS, поэтому мне не нужно было разбивать на два блока кода для HTML и CSS. Добавлен комментарий выше, говорящий OP избегать встроенного CSS. Что касается атрибута width, технически он не является устаревшим (поскольку спецификация HTML5 все еще находится в стадии разработки), но вы правы, этого следует избегать. Я отредактирую свой ответ с пометкой об этом.
bfavaretto

31

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

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

10
К сожалению, технология электронной почты на много лет отстает от текущей спецификации HTML, и в этом случае таблицы и встроенный CSS, к сожалению, неизбежны.
MikeTheLiar

2
Никто не говорил о html-письмах, это было для базового просмотра веб-страниц на рабочем столе. Но да, для электронных писем таблицы и встроенный CSS - единственный способ их создать. Спасибо, Microsoft ...
Кристина Чайлдс

3
Я использую электронную почту только потому, что это привело меня сюда; У меня была такая же проблема с электронной почтой.
MikeTheLiar

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

Это заставит стилизованную ширину <td> . Если текст переполняет его, он будет перекрывать другой <td>текст. Так что попробуйте использовать медиа-запросы.


1
В моем случае это было так же важно, как и ответ
bfavaretto

В моем случае (Firefox 70.0) table-layout:fixedстолбцам назначена фиксированная ширина, поэтому я больше не могу изменять width(с помощью jquery).
Хосе Мануэль Абарка Родригес

7

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







0

Обратите внимание, что изменение ширины столбца в 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.


0

Использовать

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

Это заставит таблицу установить ширину 100%. Затем используйте этот код

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

(идентификатор таблицы - dataTable и имеет 3 столбца), чтобы указать длину каждой ячейки


0

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

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

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.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.