Html Table - фиксированная ширина столбца с горизонтальной прокруткой - не работает, когда ширина столбца больше контейнера - PullRequest
Новая
       8

Html Table - фиксированная ширина столбца с горизонтальной прокруткой - не работает, когда ширина столбца больше контейнера

2 голосов
/ 22 июля 2011

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

Единственный раз, когда работает фиксированная ширина столбцов, это когда сумма столбцовwidths <содержащий блок (т.е. без прокрутки) </p>

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

    <div class="scroll-content-grid21">
    <div class="ExtraScrollableContainerDiv"> 
        <table class="regular" style="width:1440px"> 
            <tr>
                <th>Item #</th>
                <th>Description</th>
                <th>Rate</th>
                <th>Qty</th>
                <th>Price</th>
                <th>Amount</th>
                <th>Prev Qty</th>
                <th>Prev Amt</th>
        etc. more columns
            </tr>

            <% 
               for (int i = 0; i < this.Model.BusinessObject.Items.Count; i++)
               {
               %>
            <tr>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].SnapshotReferenceNumber %></td> 
                    <td style="width:240px"><%: this.Model.BusinessObject.Items[i].SnapshotShortDescription%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].SnapshotUnitRate%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].SnapshotQuantity%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].SnapshotUnitOfMeasureId%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].SnapshotAmount%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].PreviousToDateQuantity%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].PreviousToDateAmount%></td>
        etc. more columns

            </tr>
        </table>


div.scroll-content-grid21
{
    overflow : auto; 
    width: 1072px; /* notice, smaller than the table width */
    height: 500px;
}

table.regular 
{
    table-layout:fixed;  
    margin-top: 0.1em; 
    margin-bottom: 0.1em;
    border-collapse: collapse;
    text-align: left;
}

Ответы [ 2 ]

2 голосов
/ 22 июля 2011

Первое, что я вижу, это то, что вам нужно также указать ширину ячейки заголовка таблицы (th). попробуйте это, чтобы увидеть, если это поможет. Также вы дали {overflow-x: auto} для td и th?

0 голосов
/ 22 июля 2011

Вот пример для всех, кому это нужно: 

<html>
<head>
<style>
  div.outer
  {
            width : 500px; 
            overflow : auto;
  }
  table
  {
     table-layout:fixed; 
     width: 100%; /* same as containing div */
  }
  th, td
  {
            border: solid 1px #ccc;
  }

</style>


</head>
<body>

<div class="outer">
    <div class="scrollable">
            <table>
                        <thead>
                                    <th style="width:50px">One</th>            
                                    <th style="width:300px">Two</th>
                                    <th style="width:200px">Three</th>
                                    <th style="width:200px">Four</th>
                                    <th style="width:200px">Five</th>
                        </thead>
                        <tbody>
                                    <tr>
                                                <td>001</td>
                                                <td>My really long description here</td>
                                                <td>10.0 units</td>
                                                <td>$100.00 dollars</td>
                                                <td>$1000.00 total</td>
                                    </tr>
                                    <tr>
                                                <td>002</td>
                                                <td>This is number 2</td>
                                                <td>5 units</td>
                                                <td>$5.00 dollars</td>
                                                <td>$25.00 total</td>
                                    </tr>

                        </tbody>
            </table>
    </div>
</div>


</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...