HTML: Сделать фиксированную ширину столбца таблицы

У меня есть таблица HTML с очень большим количеством столбцов. Теперь я хочу указать ширину столбцов. Первый столбец должен быть 600px, и каждый соответствующий столбец должен иметь ширину 200px.HTML: Сделать фиксированную ширину столбца таблицы

В настоящее время происходит то, что все столбцы тесно связаны с шириной экрана, а не 200px и позволяют мне прокручивать.

Я использую HTML_Table

Это мой код:

<head> 
    <link rel="stylesheet" type="text/css" href="table.css"> 
    <style> 
    #table_format { 
     border-collapse: collapse; 
     font-family: Helvetica, Arial, sans-serif; 
     font-size: 16px; 
     font-style: normal; 
     border: 1px solid black; 
     overflow-x: auto;  
    } 

    #table_format th { 
     padding: 5px; 
     font-size: 1.2em; 
     text-align: left; 
     border-bottom: 1px solid black; 
     background-color: #F2C545; 
    } 

    #table_format td { 
     padding: 5px; 
    } 

    </style> 
</head> 
.... 
Some other code here 
....  
    <?php 

    require_once "HTML/Table.php"; 
    $table = new HTML_Table(array("id"=>"table_format")); 
    $firstColumnStyle=array('width' => '600'); 
    $subsequentColumnStyle=array('width' => '200'); 

    .... 
    .... 
    Other code to print values here 
    .... 
    .... 
    $table->updateColAttributes(0, $firstColumnStyle, null); 
    for ($cols = 1; $cols <= count($arr1); $cols++) 
    { 
     $table->updateColAttributes($cols, $subsequentColumnStyle); 
    } 
    echo $table->toHtml();

Когда я инспектировать элемент, я могу видеть, что первый столбец имеет ширину 600, а все остальные имеют 200. Но ширина не отражается, когда я делаю страницу.

enter image description here

Я не хочу, чтобы поместить таблицу в обертку и установить ширину обертки на статическое значение из-за этих двух причин:

1. I don't know how many columns I have. 
2. The scrollbar in the wrapper appears at the very bottom after all the rows, and to access the scrollbar, one needs to scroll to the very bottom. I'd rather have the horizontal scroll on the page rather than on the wrapper

Есть ли способ, которым я могу это достичь?

источник

2015-07-05 Randomly Named User

Вы можете предоставить jsfiddel.? –

Здесь рабочее решение: https://jsfiddle.net/msdspjpu/ –

Большое спасибо, что сработало :) –

Мне нужно было использовать min-width недвижимость для first-child. Вот рабочее решение. https://jsfiddle.net/msdspjpu/

tr > td { 
    min-width: 200px; 
    border: 1px solid black; 
} 
tr > td:first-child { 
    min-width: 600px; 
}

Спасибо, @Matjaz, за ответ.

источник

2015-07-05 07:25:11

Попытка добавления к вашей настройки следующим образом:

#table_format { 
    table-layout: fixed; 
}

От MDN Table layoutfixed ширины таблицы и столбцов устанавливаются ширины таблицы и Col элементов или по ширине первого ряда ячеек. Ячейки последующих строк не влияют на ширину столбцов.

источник

2015-07-05 06:08:59 scaisEdge

Это didn 't work, scaisEdge, но комментарий, отправленный @Matjaz, работал. :) jsfiddle.net/msdspjpu –

HTML: Сделать фиксированную ширину столбца таблицы

ответ

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