61,112
社区成员
发帖
与我相关
我的任务
分享如何合并这两个样式：多表如何根据需要的列宽组合调用w2{min-width:200;}和换行white-space:norma？
我的文件有很多表，这个文件将来要在电脑和手机上通用，<br/>在手机上用时，内容少的，我让其宽度自适应内容宽度，更多内容的单元格我要求td的min-width:60px，max-width:400px;<br/>
但这也不能满足我的要求，因为有些单元格要是放任其在这个范园变化，就会把表撑得很大，就很难看，所以又要到个别表中去修改td的最小值和是否换行。
前面说得点乱，可以不管，我现在就是想问，我如何把样式名为w1,w2,……w9（内容分别是min-width:100; min-width:200…… min-width:900;）多个情况，分别与控制可能的列的td:nth-child(1),td:nth-child(2),……td:nth-child(9)（内容均为： white-space:normal; color:blue;/*测试用*/）
意思就是根据各表的各列的需要设的宽去组合上边的两类样式控制。
不需要控制的表我就不去调用上边的样式。
---------------------------------------------下边是文件------------------------------------------
table{
border-collapse:collapse;
border-spacing:0;
border:0;
width:100%;
}
td, th{
text-align:left;
vertical-align:middle;
border:1px solid #999!important;
padding:.3rem 0.5rem;
font-size:0.9rem;
min-width:60px;
max-width:400px;
white-space:nowrap;
word-break:break-all;
word-wrap:break-word;
}
/*可能的列宽*/
.w1{min-width:100px;}
.w2{min-width:200px;}
.w4{min-width:400px;}
.w5{min-width:500px;}
.w6{min-width:600px;}
.w7{min-width:700px;}
.w8{min-width:800px;}
/*可能要控制的列*/
td:nth-child(1),td:nth-child(2),
td:nth-child(3),td:nth-child(4),
td:nth-child(5),td:nth-child(6),
td:nth-child(7),td:nth-child(7),
td:nth-child(9),td:nth-child(10){
white-space:normal;
color:blue;/*测试用*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="mycss.css" rel="stylesheet" type="text/css">
</head>
<body>
<br/> <br/> <br/>
<h1>
</h1>
<h1>表1是我想影响控制的</h1>
<div class="table-container">
<table id="table-1" class="table-hover">
<tbody>
<tr>
<td width="10%">序号</td>
<td width="60%" class="w2">名 称</td>
<td width="15%">文 号</td>
<td width="15%">备 注</td>
</tr>
<tr>
<td>
1</td>
<td min-width="200px">关于印发《城镇地籍调查成果检查验收表办法（试行）》的通知</td>
<td>〔1991〕国土〔籍调〕字第10号</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td min-width="200px">关于印发《日常地籍管理办法〈农村部分〉（试行）》的通知</td>
<td>〔1992〕国土〔籍〕字第8号</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td min-width="200px">国家土地管理局关于颁布《县级以上地方人民政府土地登记专用章管理办法》的通知</td>
<td>〔1992〕国土〔籍〕字第183号</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>已开发油气田储量管理规定（试行）</td>
<td>储发〔1992〕18号</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>关于对黑龙江省土地管理局有关土地权属问题请示的答复</td>
<td>〔1993〕国土函字第191号</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>关于贯彻执行《水土保持法实施条例》有关规定的通知</td>
<td>地发〔1993〕227号</td>
<td>地质矿产部、水利部联合发布</td>
</tr>
<tr>
<td>7</td>
<td>关于对铁路用地登记发证问题的复函</td>
<td>〔1994〕国土函字第9号</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>关于确认在中国海域开采海洋石油资源不重复征收矿产资源补偿费的复函</td>
<td>地函〔1994〕156号</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td>关于征收跨省级行政区域油、气田油、气资源补偿费的复函</td>
<td>地函〔1994〕247号</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>关于对土地价格评估机构进行登记管理有关问题的通知</td>
<td>〔1995〕国土〔籍〕字第10号</td>
<td></td>
</tr>
<tr>
<td>11</td>
<td>国家土地管理局关于对虾岭头西南面争议的土地确权如何适用法律问题的复函</td>
<td>〔1995〕国土函字第21号</td>
<td></td>
</tr>
<tr>
<td>17</td>
<td>国家土地管理局对广东省国土厅关于确权有关规定是否适用确认林地所有权和使用权问题请示的批复</td>
<td>国土批〔1996〕20号</td>
<td></td>
</tr>
<tr>
<td>18</td>
<td>对河南省土地管理局关于洛阳市土地权属问题的请示的批复</td>
<td>国土批〔1996〕93号</td>
<td></td>
</tr>
<tr>
<td>19</td>
<td>对陕西省土地管理局关于西安市香米园穆斯林坟地权属问题的请示的批复</td>
<td>国土批〔1996〕107号</td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>对辽宁省土地管理局关于土地权属问题的请示的批复</td>
<td>国土批〔1996〕116号</td>
<td></td>
</tr>
<tr>
<td>21</td>
<td>国家土地管理局关于实施土地登记持证上岗制度的通知</td>
<td>〔1996〕国土〔籍〕字第190号</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<br/> <br/> <br/>
<h1>表2 不需要特殊控制，默认的样式</h1>
<div class="table-container">
<table id="table-1" class="table-hover">
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td>围岩稳固性<span class="sup">①</span></td>
<td>矿体倾斜度<span class="sup">②</span></td>
<td>回采率（%）</td>
</tr>
<tr>
<td rowspan="2">稳 固</td>
<td>缓倾斜与急倾斜矿体</td>
<td>83</td>
</tr>
<tr>
<td>倾斜矿体</td>
<td>81</td>
</tr>
<tr>
<td rowspan="2">不稳固</td>
<td>缓倾斜与急倾斜矿体</td>
<td>79</td>
</tr>
<tr>
<td>倾斜矿体</td>
<td>78</td>
</tr>
<tr>
<td rowspan="2">极不稳固</td>
<td>缓倾斜与急倾斜矿体</td>
<td>77</td>
</tr>
<tr>
<td>倾斜矿体</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
<h1>表3 可能需要控制</h1>
</body>
</html>
...全文
请发表友善的回复…
发表回复
bigcatln 2018-04-23
- 打赏
- 举报
非常不错的说
