CSS上的边框高度

Question

我有一个TD表，在它右边我想添加一个1像素的边框，所以我做到了这一点：

table td {
    border-right:1px solid #000;
}

它工作正常，但问题是边框的高度取TD的总高度。

有没有办法设置边框的高度？

Answer 1

我有另一种可能性。这当然是一种“更新”的技术，但对我的项目来说已经足够了。

只有在需要一个或两个边框时才有效。我从来没有用4个边界做过......说实话，我还不知道答案。

.your-item {
  position: relative;
}

.your-item:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  width: 1px;

  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value

  background-color: #000000; // The color of your border
}

我希望这对你也有帮助，对我来说，这是一个简单的解决方法。

Answer 2

不，没有。边框总是和元素一样高。

通过将单元格的内容包装在<span>中，并对其应用高度/边框样式，可以达到相同的效果。或者通过在1像素宽的PNG中绘制一条正确高度的短垂直线，并将其作为背景应用于单元格：

background:url(line.png) bottom right no-repeat;

Answer 3

是的，您可以在定义边框后设置线高，如下所示：

border-right: 1px solid;
line-height: 10px;

Answer 4

对于td元素，line-height将成功允许您调整边框高度，如SPrince所述。

对于其他元素（如列表项），可以使用line-height控制边框高度，使用margin-top和margin-bottom控制实际元素的高度。

以下是两个工作示例： http://jsfiddle.net/byronj/gLcqu6mg/

列表项的示例：

li { 
    list-style: none; 
    padding: 0 10px; 
    display: inline-block;
    border-right: 1px solid #000; 
    line-height: 5px; 
    margin: 20px 0; 
}

<ul>
    <li>cats</li>
    <li>dogs</li>
    <li>birds</li>
    <li>swine!</li>
</ul>

Answer 5

不，您无法设置边框高度。

Answer 6

table {
 border-spacing: 10px 0px;
}

.rightborder {
border-right: 1px solid #fff;
}

然后使用您的代码：

<td class="rightborder">whatever</td>

希望有所帮助！

Answer 7

目前，不，不是没有诉诸欺骗。元素上的边界应该运行它们适用的元素框的任何一侧的整个长度。

Answer 8

.main-box{  
    border: solid 10px;
}
.sub-box{
    border-right: 1px solid;
}

//在框的右侧绘制一条线。 稍后添加margin-top和margin-bottom。 即，

.sub-box{
    border-right: 1px solid;
    margin-top: 10px;;
    margin-bottom: 10px;
}

这可能有助于在盒子的右侧画一条线，顶部和底部有一个间隙。

Answer 9

在@ ReBa的答案之上，这个custom-border课程对我有用。

MODS的：

• 使用border 代替 backaground-color，因为background-color不一致。
• 设置height＆amp; top的{​​{1}}属性:after，其总数达到100%，其中bottom的值为隐式

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  padding: 10px;
}

.custom-border {
  position: relative;
}

.custom-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #6c757d solid;
  top: 35%;
  right: 0;
  height: 30%;
  margin-top: auto;
  margin-bottom: auto;
}

＆＃13;

<ul>
  <li class="custom-border">
    Hello
  </li>
  <li class="custom-border">
    World
  </li>
  <li class="custom-border">
    Foo
  </li>
  <li class="custom-border">Bar</li>
  <li class="custom-border">Baz</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

祝你好运......

Answer 10

这将在单元格的左侧添加一个居中边框，该边框为单元格高度的80％。您可以在此处引用完整的border-image documentation。

table td {
    border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}

Answer 11

就像其他人说的那样，您无法控制边框高度。 但是有解决方法，这是我的工作：

table {
  position: relative;
}

table::before { /* ::after works too */
  content: "";
  position: absolute;
  right: 0; /* Change direction for a different side*/
  z-index: 100; 
  width: 3px; /* Thickness */
  height: 10px;
  background: #555; /* Color */
}

您可以将height设置为inherit来设置表格的高度，或者将calc(inherit - 2px)设置为2px的边框。 请记住，未设置桌子高度时inherit无效。

使用height: 50%表示半边框。

Demo

Answer 12

table td {
    border-right:1px solid #000;
    height: 100%;
}

只需在border属性下添加高度。