如何使第一行（发布商）更合适？因为当我放一个复选框时，它会自动变得比我需要的大。
如何获得像图像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>
最佳答案
您首先要做的就是在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>
关于php - CSS3使 table 更合适，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22841858/