Question

对不起我是设计新手我试图设计一个像这样的表 enter image description here

我试过这段代码

.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 任何想法如何编辑CSS？边界线也不显示。感谢。

Answer 1

试一下

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

Answer 2

你需要更多的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 s。

Answer 3

也许你喜欢这样的东西。 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>

Answer 4

设置您所需的行高并调整文本框的位置。

bootply在这里： - http://www.bootply.com/N5EPFSq94P

如何删除TR和TD中的空间

4 个答案: