Dashed line on a table

HTML & CSS
1

i wanted to make a table with the boder is a dashed line with the color i specify. i dont know if this is a javascript trick or just html?

i am going to be making a side menu and i wanted to put the menu items in a table with a border that is a dashed line with the dashes is a specific color.

thanks in advanced for your help.

:slight_smile:

2

You can use CSS to accomplish what you want:


table {
  border: 1px dashed #cccccc;
  border-collapse: collapse;
}
table td {
  border: 1px dashed #cccccc;
}

And there you go :).

3

i am a little green when is comes to css.

i want to apply the dashes to only one table in the layout. how do i make it work if i define this css in the head, but what tags do i add to the table to make only certain tabkes with dashes?

i dont know if i am saying this the right way? how do i apply a css to a specific table?

4

Define a class or ID for the table, like so:


table.dash {
   border: 1px dashed #cccccc;
   border-collapse: collapse;
}
table.dash td {
   border: 1px dashed #cccccc;
}



<table class="dash">
<!--rest of table code here-->

Be careful with nesting tables, since the cells in nested tables will also take on the border (unless you give them another class to override the border rules).

5

or just create a custom class that isnt part of the table tag then place that class in any tag you wish to see your style applied


.dash {
   border: 1px dashed #cccccc;
   border-collapse: collapse
}
 
--------------
<tr>
<td class="dash">
<!-- content -->
</td>
</tr>
6

nice, this is great. since now i know how to add the diffrent classes for the diffrent styles i want, i am going to have a much easier time setting up new layouts.

yhanks for the great help!