html - 使用表格时，左侧横幅背景样式不正确

Question

我在左上角有一个 Logo ，但彩色横幅包围了 Logo (1 像素)。我希望颜色仅从 Logo 下方开始。这是我的 plunker http://embed.plnkr.co/XgnGewkSImk4Me6irfBh/preview

无论我做什么，它要么包围 Logo (1px)，要么横幅就在 Logo 旁边。尝试为此工作一个小时无济于事:/

(在这种特殊情况下我必须使用表格)

编辑:横幅必须随着出现的文本自行增长(没有固定高度)，以防万一你想知道。例如，如果有 5 个段落，则意味着横幅必须增长同样多。

body {
  width: 100%;
  background-color: #FFFFFF;
  color: #000000;
  word-wrap: break-word;
  -webkit-nbsp-mode: space;
  -webkit-line-break: after-white-space;
  margin: 0px;
  margin: auto;
  padding: 0px;
  padding-bottom: 10px;
  padding-top: 29px;
}
.float_left {
  float: left;
}
.float_right {
  float: right;
}
.clear_float {
  clear: both;
}
.display_none {
  display: none;
}
.margin_auto {
  margin: auto !important;
}
#main_table {
  border: 0px;
  border-spacing: 0px;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
}
.banner_table {
  width: 100%;
  border: 0px;
  border-spacing: 0px;
  padding: 0px;
}
.text_table {
  width: 700px;
  border: 0px;
  border-spacing: 0px;
  padding: 0px;
}
.td_two {
  height: 25px;
  background-color: #FFFFFF;
}
.td_three {
  width: 107px;
  background-color: #FFFFFF;
}
.logo {
  display: block;
  width: 107px;
  height: 79px;
}
.bgbanner {
  /*      background-color:#E7E7E7;*/
  background-color: black;
  vertical-align: top;
  width: 107px;
}
#space {
  height: 12px;
  background-color: #FFFFFF;
}
.blue_bgbanner {
  display: block;
  text-align: right;
  background-color: #093981;
  vertical-align: bottom;
  height: 60px;
  padding-bottom: 10px;
  padding-right: 10px;
  ;
}
.gif {
  width: 299px;
  height: 20px;
  margin-top: 40px;
}
.width_12 {
  display: block;
  width: 12px;
}

<table class="main_table margin_auto">
  <tr>
    <td class="bgbanner">
      <table class="banner_table">
        <tr>
          <td class="td_three">
            <img src="http://images.stockfreeimages.com/1635/sfi/free_16354477.jpg" class="logo" alt="" />
          </td>
        </tr>
        <tr>
          <td id="space">
          </td>
        </tr>
      </table>
    </td>
    <td class="width_12">
    </td>
    <td>
      <table class="text_table">
        <tr>
          <td class="blue_bgbanner clear_float"></td>
        </tr>
        <tr>
          <td class="clear_float">
            <p>
              Lorem ipsum ut ultricies commodo purus mattis egestas. Morbi sed diam in augue posuere convallis. Phasellus ac efficitur metus, in imperdiet eros. Nulla facilisi. Duis ultricies mattis sapien. Aliquam lacinia, arcu eu imperdiet cursus, dui risus porttitor
              lacus, at placerat magna eros vel massa. Vivamus sit amet dictum purus. Maecenas dictum augue eu velit pharetra congue. Curabitur suscipit ante sed turpis semper lacinia. Mauris luctus vel urna sed elementum. Curabitur ut risus nibh. Praesent
              lectus purus, congue et luctus sit amet, congue eu massa. Vestibulum dolor lorem, elementum sed dui in, hendrerit commodo orci. Cras eu urna nec odio rutrum suscipit. Donec sit amet lorem scelerisque, venenatis est eu, porta enim. Nam quam
              leo, sollicitudin at nunc id, posuere molestie arcu
            </p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

两个例子

1 - 不改变 HTML

在不改变布局的情况下，只需从 td 中删除默认填充:

td {
  padding: 0;
}

给我们这个:

我还添加了 border-collapse: collapse 并删除了图像上的高度属性。

这是您的新演示:

td {
  padding: 0;
}

body {
  width: 100%;
  background-color: #FFFFFF;
  color: #000000;
  word-wrap: break-word;
  -webkit-nbsp-mode: space;
  -webkit-line-break: after-white-space;
  margin: 0px;
  margin: auto;
  padding: 0px;
  padding-bottom: 10px;
  padding-top: 29px;
}
.float_left {
  float: left;
}
.float_right {
  float: right;
}
.clear_float {
  clear: both;
}
.display_none {
  display: none;
}
.margin_auto {
  margin: auto !important;
}
#main_table {
  border: 0px;
  border-spacing: 0px;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}

.banner_table {
  width: 100%;
  border: 0px;
  border-spacing: 0px;
  padding: 0px;
}
.text_table {
  width: 700px;
  border: 0px;
  border-spacing: 0px;
  padding: 0px;
}
.td_two {
  height: 25px;
  background-color: #FFFFFF;
}
.td_three {
  width: 107px;
  background-color: #FFFFFF;
}
.logo {
  display: block;
  width: 107px;
}
.bgbanner {
  /*      background-color:#E7E7E7;*/
  background-color: black;
  vertical-align: top;
  width: 107px;
}
#space {
  height: 12px;
  background-color: #FFFFFF;
}
.blue_bgbanner {
  display: block;
  text-align: right;
  background-color: #093981;
  vertical-align: bottom;
  height: 60px;
  padding-bottom: 10px;
  padding-right: 10px;
  ;
}
.gif {
  width: 299px;
  height: 20px;
  margin-top: 40px;
}
.width_12 {
  display: block;
  width: 12px;
}

<table class="main_table margin_auto">
  <tr>
    <td class="bgbanner">
      <table class="banner_table">
        <tr>
          <td class="td_three">
            <img src="http://images.stockfreeimages.com/1635/sfi/free_16354477.jpg" class="logo" alt="" />
          </td>
        </tr>
        <tr>
          <td id="space">
          </td>
        </tr>
      </table>
    </td>
    <td class="width_12">
    </td>
    <td>
      <table class="text_table">
        <tr>
          <td class="blue_bgbanner clear_float"></td>
        </tr>
        <tr>
          <td class="clear_float">
            <p>
              Lorem ipsum ut ultricies commodo purus mattis egestas. Morbi sed diam in augue posuere convallis. Phasellus ac efficitur metus, in imperdiet eros. Nulla facilisi. Duis ultricies mattis sapien. Aliquam lacinia, arcu eu imperdiet cursus, dui risus porttitor
              lacus, at placerat magna eros vel massa. Vivamus sit amet dictum purus. Maecenas dictum augue eu velit pharetra congue. Curabitur suscipit ante sed turpis semper lacinia. Mauris luctus vel urna sed elementum. Curabitur ut risus nibh. Praesent
              lectus purus, congue et luctus sit amet, congue eu massa. Vestibulum dolor lorem, elementum sed dui in, hendrerit commodo orci. Cras eu urna nec odio rutrum suscipit. Donec sit amet lorem scelerisque, venenatis est eu, porta enim. Nam quam
              leo, sollicitudin at nunc id, posuere molestie arcu
            </p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

2 - 简化。更少的表格元素，更多的 CSS。

现在，正如评论中所讨论的那样，我们可以将表格更像 div 并以相同的方式设置它们的样式。由于表格要求看起来很武断，也许这是一个很好的折衷方案？

• 并排创建两个表。

• 每个表格都被赋予了 CSS 属性 display: inline-table 所以他们排成一行

• 左表有一个单独的 td 来填充内容

• 右边的表格有一个带有单个 th 的标题内容的 thead 和一个带有单个 td 的主要内容正文的 tbody。

• 如果需要，两个表格的高度可以是页面高度的 100%。

此示例中的左表具有 min-height: 500px，一旦内容达到 500px 阈值就会展开。

CSS/HTML/演示

* {
  margin: 0;
  padding: 0;
}
html,body {
  height: 100%;
}
.wrap {
  width: 900px;
  margin: 0 auto;
  height: 100%;
}
table {
  border-collapse: collapse;
}
td {
  vertical-align: top;
}

.left {
  display: inline-table;
  vertical-align: top;
  width: 100px;
  background: #000;
  min-height: 500px;
}
.left img {
    width: 100%;
}
.right {
  display: inline-table;
  vertical-align: top;
  width: 700px;
  margin: 0 0 0 20px;
}

/*Treat it like a div*/
.right .header {
  background: blue;
  height: 100px;
}

/*Treat it like a div*/
.right .content {
  padding: 20px 10px 10px;
}

<div class="wrap">
  <table class="left">
    <tr>
      <td>        
        
        <img src="http://images.stockfreeimages.com/1635/sfi/free_16354477.jpg">      
      
      </td>
    </tr>
  </table>
  
  <table class="right">
    <thead>
      <tr>
        <th class="header">          
          
          Header content         
          
        </th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <td class="content">      
          
          Give me more content!        

        </td>
      </tr>
    </tbody>
  </table>
</div>