发表新帖
发表新帖

How do I set border width with CSS?
前端 未结
关注
7 1553
广开言路
广开言路 2020-12-05 22:15

Why does this work?

And this doesn\'t?

<
相关标签:
7条回答
  • 北恋
    2020-12-05 22:52

    The default border-style is none, so you must specify that as well as the width and the colour.

    You can use the border shorthand property to set all three values in one go.

    Also, the border attribute describes the border for the table and the cells. CSS is much more flexible so it only describes the border of the elements you are selecting. You need to select the cells too in order to get the same effect.

    table, th, td {
    border: solid black 1px;
}

    See also border properties and tables in CSS.

    0 讨论(0)
  • 甜味超标
    2020-12-05 22:56

    Doing borders on tables with css is a bit more complicated (but not as much, see this jsfiddle as example):

    table {
  border-collapse: collapse;
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}
    <table>
  <tr>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-05 22:56

    Like this:

    border: 1px solid black;

    Why it didn't work? because:

    Always declare the border-style (solid in my example) property before the border-width property. An element must have borders before you can change the color.

    0 讨论(0)
  • 情书的邮戳
    2020-12-05 23:00 
    <table style='border:1px solid black'>
    <tr>
        <td>Derp</td>
    </tr>
</table>

    This should work. I use the shorthand syntax for borders.

    0 讨论(0)
  • 粉色の甜心
    2020-12-05 23:00 
    <table style="border: 5px solid black">

    This only adds a border around the table.

    If you want same border through CSS then add this rule:

    table tr td { border: 5px solid black; }

    and one thing for HTML table to avoid spaces

    <table cellspacing="0" cellpadding="0">
    0 讨论(0)
  • 时光说笑
    2020-12-05 23:03

    The reason it didn't work is that despite setting the border-width and the border-color you didn't specify the border-style:

    <table style="border-width:1px;border-color:black;border-style:solid;">

    JS Fiddle demo.

    It's usually better to define the styles in the stylesheet (so that all elements are styled without having to find, and change, every element's style attribute):

    table {
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    /* or, of course,
    border: 1px solid #000;
    */
}

    JS Fiddle demo (Or using shorthand border notation).

    0 讨论(0)
 看不清?
提交回复
热议问题