2016-11-08 5 views
0

Моя ширина HTML таблицы неизвестно, и я хочу, чтобы сделать его фиксированную ширину для каждого TDКак сделать HTML таблицу фиксированной ширины, когда изменение размера страницы

table-layout=fixed работает, если установить ширину таблицы. Однако моя ситуация такова, что ширина таблицы неизвестна:

<table style="border:solid 1px #333;table-layout:fixed"> 
    <tr> 
    <td style="width:200px">200</td> 
    <td style="width:300px">300</td> 
    </tr> 
    <tr> 
    <td><input style="width:100%"></td> 
    <td><input style="width:100%"></td> 
    </tr> 
</table> 

выше примера работает красиво, если моя ширина браузера страницы больше, чем 500px, однако при изменении размера страницы, мне нужно солесодержание остаться с фиксированным.

Если нет input внутри тд следующие будут работать:

<table style="table-layout:fixed"> 
    <tr> 
    <td style="min-width:200px"> 

Однако есть вход в тд

работает версия следующая, каждый раз, когда изменение размера тд, необходимо обновление ширины таблицы:

<table style="table-layout:fixed;width:500px"> 
    <tr> 
    <td style="min-width:200px"> 

Ну, я, наконец, нашел, что это работает так: мин-ширина + размер = 1 рабочий :)

<table style="table-layout:fixed"> 
    <tr> 
    <td style="min-width:200px">header</td> 
    </tr> 
    <tr> 
    <td><input size="1"></td> 
    </tr> 

https://jsfiddle.net/7nttub0b/3/

+0

Для этого обычно используется colspan, но если вам это нужно, у вас должен быть фиксированный размер таблицы. Зачем нужен столбец фиксированного размера с неизвестным размером таблицы? Если вы хотите достичь этого, сделайте таблицу 500px, colspan = 2 для первого столбца и colspan = 3 для второго столбца. – applecrusher

+0

Вы не фиксировали ширину на том, что вы не знаете ширины? Зачем? –

ответ

0

Попробуйте сделать это: <table style="border:solid 1px #333; table-layout:fixed" width="400">

2

Это может работать размерный тд, если вы хотите неподвижную:

<table style="border:solid 1px #333;table-layout:fixed"> 
    <tr> 
    <td style="min-width:200px">200</td> 
    <td style="min-width:300px">300</td> 
    </tr> 
</table> 
+0

Это мой оригинальный код, почему вы его скопировали? – SIDU

+0

@SIDU Я не думаю, что это ваш исходный код. см. ** min-width ** – coskukoz

+0

OK Спасибо. min-width IS работает с текстом. Однако моя ошибка не дала подробного вопроса, в TD, есть вход со 100% шириной, которая останавливает минимальную ширину td, работая – SIDU

0
<table border="1" width="500px"> 
    <tr> 
    <td style="width:200px">200</td> 
    <td style="width:300px">300</td> 
    </tr> 
</table> 
+0

Да, это то, что я сказал, работаю, но им интересно, работает ли он без ширины таблицы = 500px – SIDU

+0

Если я устанавливаю ширину таблицы = 500 пикселей, каждый раз, когда я изменяю размер td, мне нужно также настроить ширину таблицы – SIDU

+0

, вы запросили фиксированную ширину, так что я использовал фиксированную ширину для таблицы и td. теперь эта таблица будет оставаться той же шириной на всех разрешениях экрана. – user2362008

0

Попробуйте этот код

<table style="border:solid 1px #333;table-layout:auto"> 
    <tr> 
    <td style="width:200px">200</td> 
    <td style="width:300px">300</td> 
    </tr> 
</table> 
+0

Нет. Мне нужна фиксированная ширина. нет 100% – SIDU

+0

@SIDU Я обновил. попробуйте сейчас – coskukoz

+0

авто не работает :) как и ожидалось – SIDU