我正在搜索结果,但我没有找到任何结果。
我想要一张简单的桌子, 现在我有三个问题:
是如何修复标题(粗体文字区域)
如何修复左侧部分(1种文本区域)
如何修正右侧部分(7种文字)
HTML
<div class="m-m">
<table class="demo-table">
<tr>
<td>fixed area</td>
<td>fixed area</td>
<td>fixed area</td>
<td>fixed area</td>
<td>fixed area</td>
<td>fixed area</td>
<td>fixed area</td>
</tr>
<tr>
<td>fixed area</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>fixed area</td>
</tr>
<tr>
<td>fixed area</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>fixed area</td>
</tr><tr>
<td>fixed area</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>fixed area</td>
</tr><tr>
<td>fixed area</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>fixed area</td>
</tr><tr>
<td>fixed area</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>fixed area</td>
</tr><tr>
<td>fixed area</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>fixed area</td>
</tr><tr>
<td>fixed area</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>fixed area</td>
</tr><tr>
<td>fixed area</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>fixed area</td>
</tr><tr>
<td>fixed area</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>fixed area</td>
</tr>
</table>
</div>
的CSS
table {
border-collapse: collapse;
border-spacing: 0;
}
.m-m{
width:200px;
height:200px;
margin:0 auto;
overflow:scroll;
}
.demo-table{
border:solid 1px red;
width:100%;
}
.demo-table tr:first-child td{
font-weight:bold;
}
.demo-table tr td{
border:solid 2px green;
padding:5px;
}
我想结果这个
答案 0 :(得分:0)
好的,图片更好地解释了您想要做的事情。如果您能够在表格的标题和正文上设置固定宽度,则可以将它们分开。
我在这里放置了一个可能有用的jsFiddle http://jsfiddle.net/3Lxj3/1/。
<div id="header">
<div style="width:40%;">header 1</div>
<div style="width:30%;">header 2</div>
<div style="width:30%;">header 3</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
<div id="left">
<div>row 1</div>
<div>row 2</div>
<div>row 3</div>
<div>row 4</div>
</div>
<div id="body">
<table>
<tr>
<td style="width:40%;">contents 1</td>
<td style="width:30%;">contents 2</td>
<td style="width:30%;">contents 3</td>
</tr>
<tr>
<td style="width:40%;">contents 1</td>
<td style="width:30%;">contents 2</td>
<td style="width:30%;">contents 3</td>
</tr>
<tr>
<td style="width:40%;">contents 1</td>
<td style="width:30%;">contents 2</td>
<td style="width:30%;">contents 3</td>
</tr>
<tr>
<td style="width:40%;">contents 1</td>
<td style="width:30%;">contents 2</td>
<td style="width:30%;">contents 3</td>
</tr>
</table>
</div>
<div id="right">
<div>check 1</div>
<div>check 2</div>
<div>check 3</div>
<div>check 4</div>
</div>
CSS:
#body table {
width:100%;
}
#header, #left, #body table {
border:1px solid #ccc;
}
table tr td {
height:50px;
}
#header {
margin-left:20%;
margin-right:20%;
width:59%;
}
#header div {
float:left;
}
#body {
width:59%;
float:left;
overflow:scroll;
height:200px;
}
#left {
float:left;
width:20%;
height:200px;
}
#left div {
height:50px;
}
#right {
float:left;
width:20%;
height:200px;
}
#right div {
height:50px;
}
基本上,您将标题和主体分开,但要确保它们垂直对齐。它不漂亮,但它有效。