Question

0 0

给table加滚动条

界面如下
图片描述简化的代码如下


 

 

 <div>
<table border=1>
<tr>
    <td> 国家 </td>
    <td> 姓名 </td>
    <td> 年龄 </td>
</tr>
</table>
<div  style="height:300px;width:140px;overflow:auto">
<table border=1>
<tr>
  <td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>澳大利亚</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
</table>
</div>
</div>

我希望上下两个table的列能够对其，我尝试过给每个列都定死一个width，但是发现
当列多的时候这样做并不好使

因为如果table的内容太多对界面的排版和可看性都不好，所以我想要一个超出高度自动出现滚动条的样子
有的朋友说，你直接把table 放div里面就行了啊
这样又会有一个问题，因为数据很多，下拉看的时候，就会看不到每一列的标题，
比如说每行的数据分别是各个学科的分数，如果这样的的话，下拉着看的时候，就不知道哪个分数对应的是哪一个学科
所以每一列的标题单独出来，内容要使用下拉框（先不考虑分页）
这样我就遇到一个问题，列的标题和内容因为是两个table ，造成了内容的对不齐

请大神帮帮我

（原本 bootstrap的table的ui有类似的，但是并不适用于我这种有 rowspan或者colspan的情况，不得已我只好自己写）
bootstrap的table的UI插件

css table

9 years, 11 months ago

糟糕的节操

share

糟糕的节操 9 years, 11 months ago

Answer 1

0

因为如果table的内容太多对界面的排版和可看性都不好，所以我想要一个超出高度自动出现滚动条的样子

answered 9 years, 11 months ago

波塔斯基灬

share

波塔斯基灬 answered 9 years, 11 months ago

Answer 2

0


 

 

 <div  style="height:300px;width:140px;overflow:auto">
<table border=1>
<tr>
    <th> 国家 </th>
    <th> 姓名 </th>
    <th> 年龄 </th>
</tr>

<tr>
  <td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>澳大利亚</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
</table>
</div>

answered 9 years, 11 months ago

沙耶Saya

share

沙耶Saya answered 9 years, 11 months ago

Answer 3

0


 <div>
<table border=1 width="140">
<colgroup>
    <col width="30%"/>
    <col width="30%"/>
    <col width="40%"/>
</colgroup>
<tr>
    <td> 国家 </td>
    <td> 姓名 </td>
    <td> 年龄 </td>
</tr>
</table>
<div  style="height:300px;width:157px;overflow:auto">
<table border=1 width="140">
<colgroup>
    <col width="30%"/>
    <col width="30%"/>
    <col width="40%"/>
</colgroup>
<tr>
  <td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>澳大利亚</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
<tr>
  <td>1111</td><td>222</td>
</tr>
</table>
</div>
</div>

answered 9 years, 11 months ago

都是幻觉╮

share

都是幻觉╮ answered 9 years, 11 months ago

Answer 4

0

为什么要两个table，第一个不就是表头吗？就像这样


 <table width="300" border="1" cellspacing="0"> 
    <tr> 
        <th>班级</th> 
        <th>日期</th> 
        <th>标题</th> 
    </tr> 
    <tr> 
        <td>一班</td> 
        <td>2012-5-10</td> 
        <td>标题1</td> 
    </tr> 
    <tr> 
        <td>二班</td> 
        <td>2012-5-20</td> 
        <td>标题2</td> 
    </tr> 
</table>

answered 9 years, 11 months ago

求女王包养

share

求女王包养 answered 9 years, 11 months ago

给table加滚动条

糟糕的节操

Answers

波塔斯基灬

沙耶Saya

都是幻觉╮

求女王包养

Your Answer