javascript - Adding table column dividers without distorting column data? - Stack Overflow

admin管理员组

文章数量:1302406

Is there an easy way to create vertical dividers between HTML table columns? I want to add thick bars, but the only good way I've seen to do this is to distort table data add TD's.

Is there a way to add vertical dividers between columns of a table using only jQuery+CSS?

My table structure is pretty simple.

<table>
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>

Is there an easy way to create vertical dividers between HTML table columns? I want to add thick bars, but the only good way I've seen to do this is to distort table data add TD's.

Is there a way to add vertical dividers between columns of a table using only jQuery+CSS?

My table structure is pretty simple.

<table>
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>

• javascript
• jquery
• html
• css
• html-table

Share Follow edited Jun 10, 2017 at 10:28 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 16, 2010 at 16:38 Stefan KendallStefan Kendall 67.9k6969 gold badges257257 silver badges409409 bronze badges 1

• td { border-right: 3px solid black} – mplungjan Commented Aug 16, 2010 at 16:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

what you are searching for is a attribute for the tag and it is called rules: http://www.htmlcodetutorial./tables/_TABLE_RULES.html

<table rules="cols">
  <thead><tr><th>...</tr></thead>
  <tbody><tr>...</tr>...</tbody>
</table>

You can style it using the css border properties. But the advantage over using a border on every cell is the fact that it will not add a border at the right side of the table (or the last cell actually) so you don't have to add a special class to the last cell to overwrite the border.

EDIT: Add the attribute border="0" to the tag if you don't want a border around the whole table (or not left/right of the first/last column).

EXAMPLE: http://jsbin./ixire

Using the cell border is one option you can use but there's another:

I'm not sure if you can change your table structure but if you can, use the colgroup and col tags for table. I did a quick test in latest of FF, Chrome and Opera and it worked in all:

  <style type="text/css">
     table {
        border:1px solid #ccc;
        border-collapse:collapse;
     }

     .col {
        border-right:10px solid blue;
     }

  </style>

  <div id="tDiv">

  <table border="1">
     <colgroup class="col">
        <col width="200" />
     </colgroup>
     <colgroup class="col">
        <col width="200" />
     </colgroup>
     <thead>
        <tr>
           <th>one</th>
           <th>two</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td>one one</td>
           <td>one two</td>
        </tr>
     </tbody>   
  </table>
</div>

I did not get a change to test in IE (any versions of it) though.

Generally done with border on the right (or left) of each cell.

This -> http://jsfiddle/XFtBR/ should give you a start point.

本文标签： javascriptAdding table column dividers without distorting column dataStack Overflow