1. 首页
  2. 问答
  3. 如何删除空间TR和TD

如何删除空间TR和TD

2015-02-09 78 views
-2

对不起，我是新手在设计我想设计一个表格，显示这样的 enter image description here如何删除空间TR和TD

我想这个代码

.itemdisplay { 
padding: 0px 0px 0px 0px; 
border: 0px 0px 0px 0px; 
margin: 0px 0px 0px 0px; 
display: table-cell;}

与HTML标签

  <table style="width: 100%; border-style=; " > 
      <tr> 
       <td class="itemdisplay"> 
        <input type="checkbox" value="1" name="chck" />sample1 
       </td> 
       <td class="itemdisplay"> 
        <input type="checkbox" value="1" name="chck" />sample2 
       </td> 
       <td class="itemdisplay"> 
        <input type="checkbox" value="1" name="chck" />sample3 
       </td> 
       <td class="itemdisplay"> 
        <input type="checkbox" value="1" name="chck" />sample4 
       </td> 
      </tr>

但输出显示有误，其显示如下 enter image description here 任何想法如何edi t CSS？边界线也不显示。谢谢。

来源

2015-02-09 Jeff

+1

分别勾选复选框和文本 – reuelab 2015-02-09 10:32:56

回答

0

你会需要更多的CSS。从表格中删除内联样式，并将下面的CSS添加到您的代码中。

table { 
    border-collapse: collapse; /* Collapses the margins between cells */ 
    width: 100%; 
} 
input[type="checkbox"] { 
    display: block; /* Forces a new-line after checkbox */ 
} 
.itemdisplay { 
    border: 1px solid #000000; /* Creates border for TDs */ 
    padding: 10px; /* Adds some padding to TD, adjust if needed */ 
    text-align: center; /* Centers the text in TDs */ 
}

A live demo at jsFiddle。

如果你需要把文本旁边的复选框内label元素包裹的复选框，并设置display: block到label！而非input秒。

来源

2015-02-09 10:52:21 Teemu

0

尝试这个

table tr td { 
 
border-bottom:1px solid blue;  
 
    border-left:1px solid blue; 
 
    padding:10px; 
 
}
<table style="width: 100%; " > 
 
     <tr> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample1 
 
      </td> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample2 
 
      </td> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample3 
 
      </td> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample4 
 
      </td> 
 
     </tr><tr> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample1 
 
      </td> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample2 
 
      </td> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample3 
 
      </td> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample4 
 
      </td> 
 
     </tr><tr> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample1 
 
      </td> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample2 
 
      </td> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample3 
 
      </td> 
 
      <td class="itemdisplay"> 
 
       <input type="checkbox" value="1" name="chck" />sample4 
 
      </td> 
 
     </tr> 
 
</table>

enter image description here

来源

2015-02-09 10:46:17 prog1011

0

也许你喜欢这样的事情。 CSS：

table{ 
    width:100%; 
} 
table tr td{ 
    border: 2px solid grey; 
} 
.itemcheck{ 
    float:left; 
} 
.tdText{ 
    float:left; 
    margin-left:15px; 
    margin-top:10px; 
    margin-bottom:10px; 
}

HTML：

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="my.css"> 
</head> 
<body> 
<table> 
      <tr> 
       <td> 
        <input class="itemcheck" type="checkbox" value="1" name="chck" /><div class="tdText">sample1</div> 
       </td> 
       <td> 
        <input class="itemcheck" type="checkbox" value="1" name="chck" /><div class="tdText">sample2</div> 
       </td> 
       <td> 
        <input class="itemcheck" type="checkbox" value="1" name="chck" /><div class="tdText">sample3</div> 
       </td> 
       <td> 
        <input class="itemcheck" type="checkbox" value="1" name="chck" /><div class="tdText">sample4</div> 
       </td> 
      </tr> 
      </table> 
      </body> 
      </html>

来源

2015-02-09 10:54:27 vaspant

相关问题

 相关问题