Question

如何缩短此底边框的长度，使其从“ M”的开头开始，到“ t”的结尾结束？

table {
    width: 100%;
    position: relative;
}
thead {
    border-bottom: 2px solid black;   
}
td,th {
    padding: .5em 1em;
    text-align: center;
}
tbody:before {
    /* This doesn't work because of border-collapse */
    line-height:1em;
    content:".";
    color:white; /* bacground color */
    display:block;
}

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<table>
                    <thead>
                        <tr>
                            <th scope="col">Model</th>
                            <th scope="col">Horsepower</th>
                            <th scope="col">Max Dig Depth</th>
                            <th scope="col">Operating Weight</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>A900</th>
                            <th>129 HP</th>
                            <th>19'</th>
                            <th>41,900 lb</th>
                        </tr>
                        
                        <tr>
                            <th>A900</th>
                            <th>A900</th>
                            <th>A900</th>
                            <th>A900</th>
                        </tr>
                        
                        <tr>
                            <th>A900</th>
                            <th>A900</th>
                            <th>A900</th>
                            <th>A900</th>
                        </tr>
                        
                        <tr>
                            <th>A900</th>
                            <th>A900</th>
                            <th>A900</th>
                            <th>A900</th>
                        </tr>
                        
                        <tr>
                            <th>A900</th>
                            <th>A900</th>
                            <th>A900</th>
                            <th>A900</th>
                        </tr>
                        
                        <tr>
                            <th>A900</th>
                            <th>A900</th>
                            <th>A900</th>
                            <th>A900</th>
                        </tr>
                    </tbody>
                    
                </table>
                </body>
                <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<html>

我将其添加为代码段，希望这可以使您的生活更轻松。如您所见，我无法缩短边框底部的长度。如果您还有其他需要，请告诉我。谢谢。

Answer 1

获得所需效果的最简单方法是，将第一列和最后一列中所有单元格的宽度设置为与标题中文本宽度相对应的宽度，并设置左侧和右侧填充任意单元格为0。

演示：

table {
  width: 100%;
  position: relative;
  border-collapse: collapse;
}

thead {
  border-bottom: 2px solid black;
}

td,th {
  padding: 0.5em 0;
  text-align: center;
}

tbody::before {
/* This doesn't work because of border-collapse */
  line-height: 1em;
  content: ".";
  color: white; /* bacground color */
  display: block;
}

.first {
  width: 45px;
}

.last {
  width: 125px;
}

<table>
<thead>
  <tr>
    <th class="first">Model</th>
    <th>Horsepower</th>
    <th>Max Dig Depth</th>
    <th class="last">Operating Weight</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="first">A900</td>
    <td>A900</td>
    <td>A900</td>
    <td class="last">A900</td>
  </tr>
  <tr>
    <td class="first">A900</td>
    <td>A900</td>
    <td>A900</td>
    <td class="last">A900</td>
  </tr>
  <tr>
    <td class="first">A900</td>
    <td>A900</td>
    <td>A900</td>
    <td class="last">A900</td>
  </tr>
</tbody>
</table>

Answer 2

一个简单的方法就是将div用作行，以使div不会干扰流程，就像这样：

<div class="div1">
  <div class="div2">

  </div>
</div>

.div1 {
  position: relative;
}
.div2 {
  position: Absolute;
  width: 90%;
  height: 1px;
  background-color: black;
}

缩短底部边框长度

2 个答案: