为tr和td设置不同的高度

时间：2018-10-03 17:07:54

标签： css

我正在尝试创建一个表格，其中（每个单元格的）内部垂直边框不与该图中的水平边框接触；

enter image description here

为此，我将边框设置在每个tr上，因此每条“线”是分开的，并且我为每个单元格设置了左边框。现在，我正在尝试将tr的长度设置为比该空间的td更长，但是它不起作用。 关于如何设置的任何想法？还是以不同的方式实现相同的目标？ 它必须在表格中，我不能使用网格或flex。

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  margin: 10px auto;
  width: 90%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  color: white;
  background-color: DodgerBlue;
}

td {
  background-color: white;
  color: DodgerBlue;
  height: 50px;
  text-align: center;
  border-left: 1px solid dodgerblue;
}

.first-col {
  width: 40%;
}

tr {
  border: 1px solid dodgerblue;
  height: 100px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/index.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <table>
      <tr>
        <th class="first-col">Prodoct code</th>
        <th>Unit Price</th>
        <th>Qty</th>
        <th>sub total</th>
        <th>remove</th>
      </tr>
      <tr>
        <td class="first-col">Prodoct code</td>
        <td>Unit Price</td>
        <td>Qty</td>
        <td>sub total</td>
        <td>remove</td>
      </tr>
      <tr>
        <td class="first-col">Prodoct code</td>
        <td>Unit Price</td>
        <td>Qty</td>
        <td>sub total</td>
        <td>remove</td>
      </tr>
      <tr>
        <td class="first-col">Prodoct code</td>
        <td>Unit Price</td>
        <td>Qty</td>
        <td>sub total</td>
        <td>remove</td>
      </tr>
  </div>
  </table>
</body>

</html>

3 个答案:

答案 0 :(得分：0)

如果您想将其保留为表，可以用伪类和选择器伪造错觉，就像td表示概念一样，也需要将appled附加到此才能完全发挥作用。

希望这会有所帮助，欢呼起来。

*{
    margin: 0;
    padding: 0;
    border: 0;
}
.container{
    margin: 10px auto;
    width: 90%;
}
table{
    width:100%;
    border-collapse: collapse;
}
th{
    color: white;
    background-color: DodgerBlue;
    
}
td{ position: relative;
    background-color: white;
    color: DodgerBlue;
    height: 50px;
    text-align: center;
    border-left: 1px solid dodgerblue;
  
}
.first-col{
    width: 40%;
} 
tr{
    border: 1px solid dodgerblue;
    height: 100px;
}

td:before, td:after {
  display: block;
  position: absolute;
  left: 0; right: 0;
  content: '';
  border: #fff 5px solid;
  margin-right: -1px;
}

td:last-child:before, td:last-child:after {
  margin: 0;
}

td:before {
  top: 0;
}

td:after {
  bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
            <table>
                    <tr>
                        <th class="first-col">Prodoct code</th>
                        <th>Unit Price</th>
                        <th>Qty</th>
                        <th>sub total</th>
                        <th>remove</th>
                    </tr>
                    <tr>
                            <td class="first-col">Prodoct code</td>
                            <td>Unit Price</td>
                            <td>Qty</td>
                            <td>sub total</td>
                            <td>remove</td>
                    </tr>
                    <tr>
                            <td class="first-col">Prodoct code</td>
                            <td>Unit Price</td>
                            <td>Qty</td>
                            <td>sub total</td>
                            <td>remove</td>
                    </tr>
                    <tr>
                            <td class="first-col">Prodoct code</td>
                            <td>Unit Price</td>
                            <td>Qty</td>
                            <td>sub total</td>
                            <td>remove</td>
                    </tr>
    </div>
    </table>
</body>
</html>

答案 1 :(得分：0)

您可以对::before使用::after和td样式绘制边框。 我已经从border-left样式中删除了td，并添加到了CSS之下。

td::before{
    content: " ";
    display: inline-block;
  height: 100%; 
  vertical-align: middle;

}
td:not(:last-child)::after {
    content: " ";
    border: inherit;
    display: inline-block;
    border-right: 1px solid dodgerblue;
    float: right;
    vertical-align: middle;
    height: 100%; 
}


*{
    margin: 0;
    padding: 0;
    border: 0;
}
.container{
    margin: 10px auto;
    width: 90%;
}
table{
    width:100%;
    border-collapse: collapse;
}
th{
    color: white;
    background-color: DodgerBlue;
    
}
td{
    background-color: white;
    color: DodgerBlue;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    /* border-left: 1px solid dodgerblue; */
}
td::before{
    content: " ";
    display: inline-block;
  height: 100%; 
  vertical-align: middle;

}
td:not(:last-child)::after {
    content: " ";
    border: inherit;
    display: inline-block;
    border-right: 1px solid dodgerblue;
    float: right;
    vertical-align: middle;
    height: 100%; 
}
.first-col{
    width: 40%;
} 
tr{
    border: 1px solid dodgerblue;
    height: 100px;
}
<div class="container">
            <table>
                    <tr>
                        <th class="first-col">Prodoct code</th>
                        <th>Unit Price</th>
                        <th>Qty</th>
                        <th>sub total</th>
                        <th>remove</th>
                    </tr>
                    <tr>
                            <td class="first-col">Prodoct code</td>
                            <td>Unit Price</td>
                            <td>Qty</td>
                            <td>sub total</td>
                            <td>remove</td>
                    </tr>
                    <tr>
                            <td class="first-col">Prodoct code</td>
                            <td>Unit Price</td>
                            <td>Qty</td>
                            <td>sub total</td>
                            <td>remove</td>
                    </tr>
                    <tr>
                            <td class="first-col">Prodoct code</td>
                            <td>Unit Price</td>
                            <td>Qty</td>
                            <td>sub total</td>
                            <td>remove</td>
                    </tr>
    </table>
    </div>

您也可以在这里进行测试。https://jsfiddle.net/nimittshah/k6dc0gq7/

编辑：

没有line-height .. JSFIDDLE：https://jsfiddle.net/nimittshah/k6dc0gq7/2/

享受。！

答案 2 :(得分：-1)

看看这是否适合您。

*{
    margin: 0;
    padding: 0;
    border: 0;
}

table{
    width:100%;
    border-collapse: collapse;
}
th{
    color: white;
    background-color: DodgerBlue;
    
}
td{
    background-color: white;
    color: DodgerBlue;
    height: 50px;
    text-align: center;
    
  
}
   
 .first-col{
        width: 40%;
    } 

tr{
    border: 1px solid dodgerblue;
    height: 100px;
}
 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/index.css">
        <title>Document</title>
    </head>
    <body>
        <div class="container">
                <table>
                        <tr>
                            <th class="first-col">Prodoct code</th>
                            <th></th>
                            <th>Unit Price</th>
                            <th></th>
                            <th>Qty</th>
                            <th></th>
                            <th>sub total</th>
                            <th></th>
                            <th>remove</th>
                        </tr>
                        <tr>
                                <td class="first-col">Prodoct code</td>
                                <td><h1>|</h1></td>
                                <td>Unit Price</td>
                                <td><h1>|</h1></td>
                                <td>Qty</td>
                                <td><h1>|</h1></td>
                                <td>sub total</td>
                                <td><h1>|</h1></td>
                                <td>remove</td>
                        </tr>
                        <tr>
                                <td class="first-col">Prodoct code</td>
                                <td><h1>|</h1></td>
                                <td>Unit Price</td>
                                <td><h1>|</h1></td>
                                <td>Qty</td>
                                <td><h1>|</h1></td>
                                <td>sub total</td>
                                <td><h1>|</h1></td>
                                <td>remove</td>
                        </tr>
                        <tr>
                                <td class="first-col">Prodoct code</td>
                                <td><h1>|</h1></td>
                                <td>Unit Price</td>
                                <td><h1>|</h1></td>
                                <td>Qty</td>
                                <td><h1>|</h1></td>
                                <td>sub total</td>
                                <td><h1>|</h1></td>
                                <td>remove</td>
                        </tr>
        </div>
        </table>
    </body>
    </html>

相关问题
最新问题