Question

我的桌子上有这样的代码：

    <table style='width:800px; table-layout:fixed;'>
  <tr>
    <td rowspan='4' style='width:100px; text-align: center;'><img width='100' height='50' src='http://linktotheimg'/></td>
    <td valign='top'  style='background-color:#bbdaff;'><p>some text</p></td>
  </tr>
  <tr style='background-color:#bbdaff;'>
    <td valign='top'  style='background-color:#bbdaff;'><p>some text</p></td>
  </tr>
  <tr>
    <td valign='top'  style='background-color:#bbdaff;'><p>some text<p></td>
  </tr>
  <tr>
    <td valign='top'  style='background-color:#bbdaff;'><p><a href='http://link' target='_blank'>link</a></p></td>
  </tr>
</table>

我遇到了问题，因为图像混淆了桌面布局。它在图像下面有很大的空间，桌面高度变得更大，尤其是第一行的高度。

-----------------------------------
|  img  |                         |
|       | a lot of height here    |
|       |-------------------------|
|       |-------------------------|
|       |-------------------------|
|       |-------------------------|
----------------------------------|

它应该具有更大的高度，表的总高度应该是150px。

Answer 1

这是因为浏览器将默认边距设置为p元素。将值设置为0。

＆＃13;

p {
  margin: 0;
}

＆＃13;

<table style='width:800px; table-layout:fixed;'>
  <tr>
    <td rowspan='4' style='width:100px; text-align: center;'>
      <img width='100' height='50' src='http://placehold.it/100x50' />
    </td>
    <td valign='top' style='background-color:#bbdaff;'>
      <p>some text</p>
    </td>
  </tr>
  <tr style='background-color:#bbdaff;'>
    <td valign='top' style='background-color:#bbdaff;'>
      <p>some text</p>
    </td>
  </tr>
  <tr>
    <td valign='top' style='background-color:#bbdaff;'>
      <p>some text
        <p>
    </td>
  </tr>
  <tr>
    <td valign='top' style='background-color:#bbdaff;'>
      <p><a href='http://link' target='_blank'>link</a>
      </p>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

您还没有为桌子设置高度。将height设置为150px;

http://jsfiddle.net/fy0aomhh/2/

Answer 3

.left-img{
  width:30%;
  border:1px solid red;
  height:200px;
  float:left;
}
.img-table{
  width:69%;
  height:auto;
  float:left;
}
.down-content{
clear:both;
  color:#ff8800;
}

<div class="left-img">
<h2>Img Here height="100%" And width="100%"</h2>
</div>
<table class="img-table">
<tr height="50">
 <td width="50%">Content</td> 
 <td  width="50%">Content</td> 
 </tr>
  <tr height="50">
 <td width="50%">Content</td> 
 <td  width="50%">Content</td> 
 </tr>
  <tr height="50">
 <td width="50%">Content</td> 
 <td  width="50%">Content</td> 
 </tr>
  <tr height="50">
 <td width="50%">Content</td> 
 <td  width="50%">Content</td> 
 </tr>
</table>
<div class="down-content">
<h1>Lorge Content Here Its Working Nicely For Any Resolution</h1>
</div>

表格布局间距

3 个答案: