Проблема с шириной HTML <table>

Question

У меня есть <table> с 3 столбцами как:

table {
  border: 1px dashed goldenrod;
}
td {
  border: 1px solid gray;
}

<table>
  <tr>
    <td width="120">Some content</td>
    <td width="150">Some content</td>
    <td width="100%">Some content</td>
  </tr>
</table>

Теперь 3-й столбец установлен так, чтобы занимать оставшуюся ширину. Но в моем случае, когда он растягивается и занимает оставшуюся ширину, он сжимает первые 2 столбца ...

Если я не задаю ширину для 3-го столбца / тд, я могу видеть указанную ширину для первых 2-х столбцов ..

Пожалуйста, помогите мне.

Таблица уже установлена ​​с шириной = "100%"

Answer 1

Оставьте последний столбец без ширины и установите ширину таблицы равной 100% или желаемой ширине таблицы.

Answer 2

Пример:

http://jsfiddle.net/DanielDZC/6Ywkf/

Answer 3

Я бы предложил НЕ смешивать проценты и пиксели.Это приведет к кросс-браузерным проблемам и т. Д.

Вы должны решить использовать% или пиксели, а затем просто оставить ширину 3-го столбца пустой.

Answer 4

Когда вы указываете ширину третьего td как 100%, это означает, что его ширина должна быть такой же, как и у его родителя, что в данном случае соответствует tr.Вот почему первый и второй td сжимаются, поскольку третий td пытается занять всю ширину строки.

Если в первых двух td с нет абсолютно никакого контента, вы их даже не увидите.Поскольку в этих td s есть некоторый контент, браузер выделяет минимально возможное пространство для этих двух элементов, а остальная часть ширины ограничивается третьим делением.

См. demo на jsfiddle о том, что происходит, когда ширина последнего td равна 50%.Вы увидите, что он занимает ровно половину ширины строки.

Чтобы исправить эту ситуацию, задайте процентную ширину для первых двух td с, а затем оставьте ширину третьего пустым. Здесь - это демонстрация, демонстрирующая этот подход.