Таблица ограничений клеток

-1

У меня есть простая таблица с адресом и идентификатором:Таблица ограничений клеток

table, td, th { 
 
    border: 1px solid black; 
 
} 
 
table { 
 
    table-layout: fixed; 
 
    width: 300px; 
 
} 
 
.id-col { 
 
    width: 10%; 
 
    min-width: 40px; 
 
}

<table> 
 
    <tr> 
 
    <th class="id-col">id</th> 
 
    <th class="address-col">Address</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1934</td> 
 
    <td>Fieldstone Drive North Miami Beach, FL 33160</td> 
 
    </tr> 
 
    <tr> 
 
    <td>34</td> 
 
    <td>Grove Street Macon, GA 31204</td> 
 
    </tr> 
 
</table>

Как вы можете видеть, содержание в id колонки может переполнение его ячейки таблицы. Я попытался исправить это с помощью min-width, но it seems not to work for tables.

Я решил это с помощью flexbox: https://jsfiddle.net/bkn37qtt/ Теперь он работает так, как ожидалось, но я не уверен, что это хорошо, потому что я потерял табличную семантику.

Есть ли способ сделать это со столом? Может быть, я что-то пропустил, или что-то изменилось с 2011 года (когда был указан выше вопрос)?

источник

2015-12-30 just-boris

Я не могу удалить «table-layout: fixed», потому что в противном случае таблица переполнит контейнер и иногда вызывает горизонтальную прокрутку. –

Вы все еще можете использовать flexbox, но сохраните разметку таблицы правильно? https://jsfiddle.net/bkn37qtt/2/ – stilllife

@MirkoGuarnier, да, это один из возможных вариантов. Знаете ли вы какие-либо оговорки, которые я найду дальше, если бы я сделал ставку на это? –

-1

Моя Модификация:

Использование обивка
Использование COLGROUP
Увеличение процентной Ид цв
и, наконец, удалить таблицы макета

 table, td, th { 
 
     border: 1px solid black; 
 
     padding:2px; 
 
     } 
 
     table { 
 
     /*table-layout: fixed;*/ 
 
     width: 300px; 
 
     } 
 
     .id-col { 
 
     width: 15%; 
 
     min-width: 40px; 
 
     }

<table> 
 
    <colgroup> 
 
     <col class="con1" style="align: center; width: 15%" /> 
 
     <col class="con1" style="align: center; width: 80%" />  
 
    </colgroup> 
 
    <thead>  
 
     <tr> 
 
     <th class="id-col">id</th> 
 
     <th class="address-col">Address</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody>  
 
     <tr> 
 
     <td>1934</td> 
 
     <td>Fieldstone Drive North Miami Beach, FL 33160</td> 
 
     </tr> 
 
     <tr> 
 
     <td>34</td> 
 
     <td>Grove Street Macon, GA 31204</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

источник

2015-12-30 10:15:18

Ваш код не работает для меня, см. Снимок экрана: https://yadi.sk/i/t8Caw7nFmbSbb Ожидается ли? –

@ just-boris см. Мой последний код –

Это не сработает. Вы исправили его, увеличив ширину. Я не могу сделать это в своем проекте. У меня больше столбцов, чем показано на рисунке –

Попробуйте так:

<html> 
<style> 
table, td, th { 
border: 1px solid black; 
} 
table { 
width: 300px; 
} 
.id-col { 
width: 10%; 
min-width: 40px; 
} 
</style> 
<table> 
    <tr> 
     <th class="id-col"><span>id</span></th> 
     <th class="address-col">Address</th> 
    </tr> 
    <tr> 
     <td>1934</td> 
     <td>Fieldstone Drive North Miami Beach, FL 33160</td> 
    </tr> 
    <tr> 
     <td>34</td> 
     <td>Grove Street Macon, GA 31204</td> 
    </tr> 
</table> 
</html>

источник

2015-12-30 10:17:38 soorapadman

Просто отбросьте , и вы хорошо пойдете.

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

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

Это позволит избежать нежелательного прокрутки до максимума без необходимости фиксированной таблицы.

.scroll-container { 
 
    width: 300px; 
 
    overflow-x: auto; 
 
    border: 1px solid #eee; 
 
} 
 
table, tr, td, th { 
 
    padding: 0;  /* remove padding/margin to make cells smallest possible */ 
 
    margin: 0; 
 
} 
 

 
table, td, th { 
 
    border: 1px solid black; 
 
} 
 
table { 
 
    max-width: 300px; 
 
} 
 
.id-col { 
 
    width: 10%; 
 
    /*min-width: 40px; removed this as well to make it smallest possible * 
 
}

<div class="scroll-container"> 
 
    <table> 
 
    <tr> 
 
    <th class="id-col">id</th> 
 
    <th class="address-col">Address</th> 
 
    <th>Col3</th> 
 
    <th>Col4</th> 
 
    <th>Col5</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1934</td> 
 
    <td>Fieldstone Drive North Miami Beach, FL 33160</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>34</td> 
 
    <td>Grove Street Macon, GA 31204</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 
</div>

источник

2015-12-30 10:23:56 LGSon

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

@ just-boris. Вы можете отказаться от него, используя «table-layout: fixed;». _Table и ширина столбцов задаются шириной элементов таблицы и col или ширину первого ряда ячеек.Ячейки в последующих строках не влияют на ширину столбца. И вы можете прочитать об этом подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout – LGSon

@ just-boris Показать меня как переполнение таблицы вызывает прокрутку, и я исправляю это для вас, так как вышеприведенный ответ - как делать то, что вы просите. – LGSon

Если я правильно понял, Вам не нужен фиксированный макет для таблицы, так как в идеале поведение таблицы является выпуск доступного пространства для следующей доступной ячейки. Также вам нужно избавиться от любого из этих классов, которые вы добавили в TH для управления шириной. Потому что подумайте о сценарии, когда у вас больше текста без пробелов. Он будет закручивать дизайн. Поэтому я внес изменения в ваши коды, чтобы быть более отзывчивыми.

CSS:

table, td, th { 
    border: 1px solid black; 
} 
table { 
width: 300px; 
} 
table tr>th:first-of-type,table tr>td:first-of-type{ 
    min-width: 40px; 
    max-width:80px; 
    word-break: break-all; 
}

HTML:

<table> 
    <tr> 
    <th >id</th> 
    <th >Address</th> 
    </tr> 
    <tr> 
    <td>1984</td> 
    <td>Fieldstone Drive North Miami Beach, FL 33160</td> 
    </tr> 
    <tr> 
    <td>34</td> 
    <td>Grove Street Macon, GA 31204</td> 
    </tr> 
    <tr> 
    <td>123218736218736</td> 
    <td>Fieldstone Drive North Miami Beach, FL 33160</td> 
    </tr> 
</table>

DEMO

Cheers,

Ashok

источник

2015-12-30 10:48:10

Это хорошо, но не работает для меня, потому что мой реальный код оказался более сложным. См. Комментарии к ответу @ LGSon, я прикрепил там скрипку. –

Привет, Лучшее, что мы можем сделать, это заставить переполнять слова в новой строке. Вот демонстрация: https://jsfiddle.net/Ashokkumargupta/8jg8msw0/3/ –

Я предпочитаю многоточие для него: https://jsfiddle.net/ 8jg8msw0/1/Но он работает только для фиксированных таблиц. –

После некоторых обсуждений, я придумал решение, которое flexboxes правильно решает мой вопрос

мне нужно указать пропорциональные размеры столбцов
я не хочу столбцы расти и перелива контейнер (Столы без table-layout: fixed делают это иногда)
Меня не интересует подходящее содержимое таблицы. Это нормально для меня, чтобы добавить Ellipsis
Я хочу, чтобы установить минимальный размер для каждого столбца, чтобы предотвратить разрушения содержимого ячейки

разметке на дивы с display: flex решает это вопросы лучше, поэтому если у вас есть аналогичные проблемы с my, используйте для этого flexboxes.

Вот мой окончательный вариант: https://jsfiddle.net/8jg8msw0/5/

P.S. Также стоит отметить, что вы должны указать размер для каждой строки. С таблицей достаточно просто установить его на заголовок.

источник

2015-12-30 16:52:50

Таблица ограничений клеток

ответ

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