如何在tr标签之间给出空格并除以|在HTML中

时间:2015-02-24 13:03:29

标签: javascript jquery html css

嗨,在下面的代码中如何给两行tr空间,我想用这个符号划分。背景颜色应该占据整个表。第一行不需要这个|我想将所有左侧行分成全部|符号然后右侧td的

任何人都可以帮助我

预期产出:

About Us    |   Latest News
Facilities      Events
Doctors         Gallery
Our Blogs       Contact Us

HTML

<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>About Us</td>
    <td>Latest News</td>        

  </tr>
  <tr>
    <td>Facilities</td>
    <td>Events</td>     

  </tr>
  <tr>
    <td>Doctors</td>
    <td>Gallery</td>        

  </tr>
  <tr>
    <td>Our Blogs</td>
    <td>Contact Us</td>     

  </tr>
</table>

</footer>
</div>

CSS

#slider1 footer {
    background-color:#00008B;
    width:100%;

#footer tr {
    position: relative;
    list-style-type: none;
     display: inline;
    }
#footer tr:before {
    content: " | ";
}
#footer td {
    border: 1px dotted blue;
}
#footer tr.row2 td {
    padding-top: 40px;
}
#footer tr:first-child:before {
      content: none;
}

2 个答案:

答案 0 :(得分:1)

请参阅:http://jsfiddle.net/ze0587d0/

#slider1 footer {
   
    width:100%;
}
#footer tr {
    position: relative;
    list-style-type: none;
     display: inline;
    }
#footer tr:before {
    content: " | ";
}
#footer td {
    border: 1px dotted blue;
}
#footer tr.row2 td {
    padding-top: 40px;
}
#footer tr:first-child:before {
      content: none;
}
td{
    padding:5px;
}
     .border-right{
            
            border-right:1px solid #000;
        }
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td class='border-right'>About Us</td>
    <td>Latest News</td>        

  </tr>
  <tr>
    <td>Facilities</td>
    <td>Events</td>     

  </tr>
  <tr>
    <td>Doctors</td>
    <td>Gallery</td>        

  </tr>
  <tr>
    <td>Our Blogs</td>
    <td>Contact Us</td>     

  </tr>
</table>

</footer>
</div>

只需为第一个td添加一个类,您需要|符号和css border-right:1px solid #000;

修改:

根据OP的评论,

如果您希望所有td与|进行比赛,请参阅:http://jsfiddle.net/ze0587d0/2/

你需要为所有t都添加一个border-right,它是first-child tr,

 tr td:first-child{

            border-right:1px solid #000;
        }

#slider1 footer {
   
    width:100%;
}
#footer tr {
    position: relative;
    list-style-type: none;
     display: inline;
    }
#footer tr:before {
    content: " | ";
}
#footer td {
    border: 1px dotted blue;
}
#footer tr.row2 td {
    padding-top: 40px;
}
#footer tr:first-child:before {
      content: none;
}
     tr td:first-child{
            
            border-right:1px solid #000;
        }
td{
    padding:5px;
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td >About Us</td>
    <td>Latest News</td>        

  </tr>
  <tr>
    <td>Facilities</td>
    <td>Events</td>     

  </tr>
  <tr>
    <td>Doctors</td>
    <td>Gallery</td>        

  </tr>
  <tr>
    <td>Our Blogs</td>
    <td>Contact Us</td>     

  </tr>
</table>

</footer>
</div>

答案 1 :(得分:1)

我认为这就是你所追求的......它使用你的伪元素,但绝对定位它。

#slider1 footer {
  background-color: #00008B;
  width: 100%;
  color: white;
}
#slider1 table {
  table-layout: fixed;
}
#slider1 footer tr td {
  padding: 0 1rem;
  position: relative;
}
#slider1 footer tr:first-of-type td:first-child:after {
  position: absolute;
  right: 0;
  content: "|";
}
<div id="slider1">
  <footer>
    <table cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>About Us</td>
        <td>Latest News</td>
      </tr>
      <tr>
        <td>Facilities</td>
        <td>Events</td>
      </tr>
      <tr>
        <td>Doctors</td>
        <td>Gallery</td>
      </tr>
      <tr>
        <td>Our Blogs</td>
        <td>Contact Us</td>
      </tr>
    </table>
  </footer>
</div>