Столбец с нулевой шириной

Возможно ли вообще?Столбец с нулевой шириной

У меня есть стол, который заполняет его контейнер. (ширина 100%) Две из его колонок (1-й и 3-й) имеют минимальную ширину, но средний нет.

Когда я сужу окно, я хочу, чтобы 1-й и 3-й столбцы оставались на минимальной ширине, а средний столбец должен полностью разрушаться (когда окно слишком узкое, должны отображаться только 1-й и 3-й столбцы).

Спасибо.

Существует упрощенный код, что у меня есть:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>My first styled page</title> 
    <style type="text/css"> 
.overflow{ 
    text-overflow: ellipsis; 
    word-break: break-all; 
    word-wrap: break-word; 
} 
.table{ 
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
.first{ 
    min-width: 20px; 
} 
    </style> 
</head> 

<body> 
    <table class="table"> 
     <tr> 
      <td class="first"><div class="overflow">oneoneoneone</div></td> 
      <td class="second"><div class="overflow">twotwotwotwo</div></td> 
      <td class="first"><div class="overflow">threethreethree</div></td> 
     </tr> 
    </table> 
</body> 
</html>

источник

2013-11-20 Murval

Вы можете использовать Javascript, чтобы проверить ширину контейнера, а если ширина идет меньше, чем определенное значение, изменить ширину второго столбца к нулю, или сделать его видимость скрытый. Хотя размещение div внутри таблиц не считается хорошей практикой, я должен сказать. – Pratik

Я не уверен, может ли она быть нулевой шириной, если у td есть какие-либо данные. Возможно, я ошибаюсь. – SaturnsEye

@Pratik Я ошибаюсь :) – SaturnsEye

Вы могли бы сделать это с некоторыми основными CSS стайлинга & медиа-запросов, вот пример

<table border=1> 
<thead> 
<tr> 
    <th>Col 1</th> 
    <th>Col 2</th> 
    <th>Col 3</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Row 1 Col 1</td> 
    <td>Row 1 Col 2</td> 
    <td>Row 1 Col 3</td> 
</tr> 
<tr> 
    <td>Row 2 Col 1</td> 
    <td>Row 2 Col 2</td> 
    <td>Row 2 Col 3</td> 
</tr> 
<tr> 
    <td>Row 3 Col 1</td> 
    <td>Row 3 Col 2</td> 
    <td>Row 3 Col 3</td> 
</tr> 
<tr> 
    <td>Row 4 Col 1</td> 
    <td>Row 4 Col 2</td> 
    <td>Row 4 Col 3</td> 
</tr> 
</tbody>

<style> 
@media only screen and (max-width:500px){ 
    table td:nth-child(2), table th:nth-child(2) { 
     display:none; 
    } 
} 
</style>

Поэтому, когда экран меньше 500 пикселей, второй столбец будет скрыт.

Fiddle показывая его в действии: http://jsfiddle.net/9rEgQ/2/

источник

2013-11-20 14:03:33 MLeFevre

Это правильный путь. Никогда не используйте Javascript, когда CSS может дать решение. – Sablefoste

Не лучшее решение, которое я ожидал, но это можно сделать так. Благодарю. – Murval

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

Например:

@media all and (max-width:500px) { 
.second { 
display: none; 
} 
}

В этом примере второй столбец не будет отображаться, когда экран был уменьшен до ширины менее 500px

источник

2013-11-20 14:02:00

Столбец с нулевой шириной

ответ

Смежные вопросы