CSS3 make table更合适
如何使第一行（publiser？）更合适？因为当我放一个复选框时，它会自动变得比我需要的更大。
如何让它像图像2（某种程度）？ 发表？将是复选框， beskrivelse将被描述 和valg是一个下拉框。
到：
CSS：
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%; box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
background-color:#ffaaaa;
}
.CSSTableGenerator td{
vertical-align:middle;
background-color:#ffffff;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:arial;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000) ); background:-moz-linear-gradient( center top, #ff5656 5%, #7f0000 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000"); background: -o-linear-gradient(top,#ff5656,7f0000);
background-color:#ff5656;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:arial;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000) ); background:-moz-linear-gradient( center top, #ff5656 5%, #7f0000 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000"); background: -o-linear-gradient(top,#ff5656,7f0000);
background-color:#ff5656;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
html代码：
<div class="CSSTableGenerator" >
<table style="width:670px;height:200px">
<tr>
<td>
Publiser?
</td>
<td >
Beskrivelse
</td>
<td>
valg
</td>
</tr>
<tr>
<td >
<input type="checkbox" name="check1">
</td>
<td>
Poster på facebook gruppe
</td>
<td>
<select name="usergroups" id="ugroups">
<?php
foreach ($postResults as $postResult) {
?><ul class="dropdown"><?
echo '<center><br><option value="'.$postResult["gid"].'">'.$postResult["name"].'</option></center>';
?><ul><?
}
?>
</select>
</td>
</tr>
<tr>
<td >
<input type="checkbox" name="check2">
</td>
<td>
Poster på facebook gruppe
</td>
<td>
<select name="usergroups" id="ugroups">
<?php
foreach ($postResults as $postResult) {
?><ul class="dropdown"><?
echo '<center><br><option value="'.$postResult["gid"].'">'.$postResult["name"].'</option></center>';
?><ul><?
}
?>
</select>
</td>
</tr>
<tr>
<td >
<input type="checkbox" name="check3">
</td>
<td>
Poster på facebook gruppe
</td>
<td>
<select name="usergroups" id="ugroups">
<?php
foreach ($postResults as $postResult) {
?><ul class="dropdown"><?
echo '<center><br><option value="'.$postResult["gid"].'">'.$postResult["name"].'</option></center>';
?><ul><?
}
?>
</select>
</td>
</tr>
<tr>
<td >
<input type="checkbox" name="check4">
</td>
<td>
Poster på facebook gruppe
</td>
<td>
<select name="usergroups" id="ugroups">
<?php
foreach ($postResults as $postResult) {
?><ul class="dropdown"><?
echo '<center><br><option value="'.$postResult["gid"].'">'.$postResult["name"].'</option></center>';
?><ul><?
}
?>
</select>
</td>
</tr>
<tr>
<td >
<input type="checkbox" name="check5">
</td>
<td>
Poster på facebook gruppe
</td>
<td>
<select name="usergroups" id="ugroups">
<?php
foreach ($postResults as $postResult) {
?><ul class="dropdown"><?
echo '<center><br><option value="'.$postResult["gid"].'">'.$postResult["name"].'</option></center>';
?><ul><?
}
?>
</select>
</td>
</tr>
<tr>
<td >
<input type="checkbox" name="check6">
</td>
<td>
Poster innlegget på facebook veggen din
</td>
<td>
Post på veggen din?
</td>
</tr>
<tr>
<td >
<input type="checkbox" name="check0">
</td>
<td>
Vil publisere innlegget på din personlige fb side
</td>
<TD class=mainTxt><select name="usergroups0" id="ugroups">
<?php
$result = $facebook->api("/me/accounts");
foreach($result["data"] as $page) {
echo '<center><br><option value="'.$page["id"].'">'.$page["name"].'</option></center>';
}
?>
</select>
</tr>
</table>
</div>
3 个答案:
答案 0 :(得分：0)
你写道：
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%; box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
...
}
因此该表将占用它所能占用的所有位置（取决于容器的大小）
此外，默认情况下，列自动适合。在这种情况下：你没有提到你的colums的精确宽度。但你可以预测它：例如
CSS：
.small_column{
width:50px;
}
HTML：
<table>
<tr>
<td class = 'small_column'></td>
...
</tr>
<tr>
<td class = 'small_column'></td>
...
</tr>
...
</table>
答案 1 :(得分：0)
删除所有宽度，因此每行只占用列中最长单元格的空格。
然后，将此css规则添加到table：
max-width: 100%
如果您不喜欢特定单元格的多行，请将此规则添加到td
white-space: nowrap;
警告：如果您使用nowrap，则单元格中的数据非常长，它可以超出表格的100％的固定维度。
EDIT 另一个技巧：将某些列（但不是全部）的宽度设置为百分比。
这样：
#mytable {
width: 98%; //so you can ad shadows and padding to parent container
}
#myFirstTdOfFirstCol {
}
#myFirstTdOfSecondCol{
width: 18%;
}
#myFirstTdOfThirdCol {
width: 32%;
}
使用这些规则表，它可以调整大小，如果需要，只需调整第一列的大小。
当然要获得弹性行为集max-width而不是宽度到表格。
第二次编辑：
<table style="width:670px;height:200px">
必须是：
<table>
也改变了这个：
.CSSTableGenerator table{
max-width: 98%;
margin:0px;
padding:0px;
}
第三次编辑：
与我在第二篇和原帖上的建议完美配合。 但 1）如果要在表格中显示阴影，请将其应用于表格，而不是容器DIV。
2）选择下拉菜单必须包含一个或多个<option>，而不是内置选项的无序列表<ul>。
答案 2 :(得分：0)
您首先要做的是在CSS中为表格提供100％的宽度。这将确保表的大小与容器的大小相同。然后，您将为所有列提供大小相同的数据宽度。现在第一列将使用剩余的宽度。这是一个小例子：
<style type="text/css">
div#container
{
width: 100%;
}
div#container table
{
width: 100%;
}
div#container td#column2
{
width: 10%;
}
div#container td#column3
{
width: 20%;
}
</style>
<div id="container">
<table>
<tr>
<td id="column1">Column one</td>
<td id="column2">Column two</td>
<td id="column3">Column three</td>
</tr>
<tr>
<td>Column with a lot of data in it. You are not sure how wide.</td>
<td>Data two</td>
<td>Data three</td>
</tr>
</table>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？