I need to have such thin line for the whole table as seen above. The above image is a sample only. My solution, doesn't work. The table shows no border at all.
Here is my CSS:
table { border-width: thin; border-spacing: 2px; border-style: none; border-color: black; }
border-bottom-style. border-left-style. border-right-style.
Click the Table Design tab.) Click Border Styles and choose a border style. Click Borders and choose where you want to add the borders. Tip: To change or add borders for part of your table, check that Border Painter is selected and then, in the table, click each border that you want to change or add.
In this quick tips, we will see a way to render an HTML table with single line(thin) border. Now, to have the HTML table to be rendered as Fig. B with thin border, we need to add style attribute with css property border-collapse set to collapse.
To add a border to your table, you need to define the <style> of your table. Remember to add borders also for <th> and <td> tags to have a complete table. Set the border-collapse property as well (if you don't define the border-collapse, it will use border-collapse: separate by default).
Style the td
and th
instead
td, th { border: 1px solid black; }
And also to make it so there is no spacing between cells use:
table { border-collapse: collapse; }
(also note, you have border-style: none;
which should be border-style: solid;
)
See an example here: http://jsfiddle.net/KbjNr/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With