Question

我正在尝试创建一个占用屏幕宽度70％的简单表。但是，如果表中的内容溢出70％表，则该表应该是水平可滚动的。

HTML：

<div ng-app="">
<div ng-controller="EventController">
    <div class="outter">
        <table class="countries">
            <tbody>
                <tr>
                    <th>Country name</th>
                    <td ng-repeat="countryNames in Countries">{{countryNames.countryName}}</td>
                </tr>
                <tr>
                    <th>Population</th>
                    <td ng-repeat="population in Countries">{{ population.countryName }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>

CSS：

.outter {
width: 70%;
}

.countries {
tr {
    td {            
        height: 50px;
        font-size: 11px;
        text-align: center;
        vertical-align: middle;
        font-weight: normal;
    }
}
}

这是我的小提琴：http://jsfiddle.net/oampz/QW97X/2/

Answer 1

向.countries表格width 100% overflow: auto并将.outter添加到.outter { width: 70%; overflow: auto; } .countries { width: 100%; } div。

{{1}}

小提琴：http://jsfiddle.net/QW97X/4/

Answer 2

我开发了一个轻量级，可自定义，可滚动且纯粹的CSS和HTML表格模板。我制作了里约热内卢奥运会的主题。享受！

CSS

<style>
  #grid {
    width: 100%; /* <-- Grid width */
    background-color: yellow; /* Grid background color */
    border: 2px solid lightgray; /* Grid external border color */
    overflow-y: hidden; /* <-- Do not change */
    overflow-x: auto; /* <-- Do not change */
    text-align: left; /* <-- Grid default text alignment */
    font-size: 18px; /* <-- Default text size */
  }
  #grid table {
    width: 100%; /* <-- Do not change */
    border-collapse: collapse; /* <-- Do not change */
  }
  #grid thead tr {
    background-color: yellowgreen; /* <-- Header background color */
    color: white; /* <-- Header font color */
    height: 40px; /* <-- Header height */
  }
  #grid thead, #grid tbody {
    display: block; /* <-- Do not change */
  }
  #grid tbody {
    height: 100px; /* <-- Modify here for grid height */
    overflow-x: hidden; /* <-- Do not change */
    overflow-y: auto; /* <-- Do not change */
    color: black; /* <-- Body font color */
  }
  #grid td, #grid th {
    padding: 8px; /* <-- Grid internal cell padding */
    border: 1px solid lightgray; /* <-- Grid internal border color */
    min-width: 100px; /* <-- Column default size except last one. */
  }
  #grid td:last-child, #grid th:last-child {
    width: 100%; /* <-- Do not change */
  }
  #grid tbody tr td:hover {
    background-color: lightskyblue; /* <-- Cell default color on MouseOver event */
    color: white; /* <-- Cell font color on MouseOver event */
  }
  #grid tbody tr:hover {
    background-color: steelblue; /* <-- Row default color on MouseOver event */
    color: white; /* Row font color on MouseOver event */
  }
</style>

HTML

<div id="grid">
<table>
  <thead>
  <tr>
    <th>Name</td>
    <th>Last name</td>      
    <th>Age</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  </tbody>
</table>
</div>

我希望我能帮到你！请给我反馈，请:) 朱利亚诺

带固定/左列和可滚动主体的HTML表格？

2 个答案:

CSS

HTML