Question

我无法获得表格行数据（td）来减少它的宽度。 问题是avatar td似乎占据了整行的大部分。我需要带有Traveler列的文本向左移动，如图所示

以下是我目前取得的进展：

这应该是它的样子。

如果你看，灰色容器右侧有文字，文字应该直接在头像图片旁边

已建立两列文本（该行长度为3个表格单元格）问题是我的td之一的宽度导致列启动将Traveler推到目前为止。

所以这是我的HTML：

<div id="reviews">
    <table cellpadding="0" cellspacing="0">
        <tr class="reviewuserinfo">
        <td width="60px"><img class="avatar" src="/avatar/35274"/></td>
        <td>Traveler<br>posted on 15 May, 2008</td>
        <td align="right" style="padding-right:15px">Joined 2 years ago<br>12 reviews and 49 comments posted</td>
        </tr>
        <tr class="reviewuserdata">

        <td style="width:100%" colspan="3">
            <table cellpadding="0" cellspacing="0" class="reviewchart">
                <tr><td><h2>Overall Rating <img class="stars" src="/stars/3.9/large" /> <span class="rating">4.5</span></h2></td></tr>
                <tr>
                    <td>
                        <table cellspacing="0" cellpadding="0">
                            <tr><td class="reviewlabel" style="padding-top:15px">QUALITY OF THE DANCERS</td></tr>
                            <tr><td class="reviewlabel">PRIVATE DANCES, VALUE FOR MONEY</td></tr>
                            <tr><td class="reviewlabel">OVERALL HOSPITALITY</td></tr>
                            <tr><td class="reviewlabel">GUEST TO DANCER RATIO</td></tr>
                            <tr><td class="reviewlabel">VARIETY OF DANCERS</td></tr>
                            <tr><td class="reviewlabel">VALUE FOR MONEY, COVER CHARGE</td></tr>
                            <tr><td class="reviewlabel">VALUE FOR MONEY, DRINKS</td></tr>
                            <tr><td class="reviewlabel">VALUE FOR MONEY, FOOD</td></tr>
                            <tr><td class="reviewlabel">OVERALL ATMOSPHERE</td></tr>
                            <tr><td class="reviewlabel">SOUND SYSTEM AND DJ</td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
        </tr>
    </table>    
  </div>

最后这是我的CSS：

    @CHARSET "UTF-8";
    .page {
     position: relative;
     background-color: #ffffff;
     width: 1200px;
     margin: 0px auto;
     box-sizing: border-box;
     border-left: 1px solid #d0d0d0;
     border-right: 1px solid #d0d0d0;   
    }
    table {
     border:0px;
     width:100% 
    }
    table.reviewsouter .reviewleft{
     width:800px
    }
    table.reviewsouter .reviewright{
     width:400px
    }
    #reviewspotlight {
     position: relative;
     background-color:#000000;
     height:111px;
     z-index:19997;
     font-family: DinWebCond, Sans-serif;
     color:#ffffff;
    }
    #reviews {
      position: relative;
      background-color:#ffffff;
      color:#000000;
      border-right:1px solid #d0d0d0;
    }
    #reviews table tr.reviewuserinfo {
      background-color:#f0f0f0;
      height:60px;
      border-left:1px solid #d0d0d0;      
    }
    #reviews table tr.reviewuserinfo img.avatar{
      position:relative;
      width:40px;
      height:40px;
      margin:10px 0px 10px 10px;
      display: inline-block;
      vertical-align: middle;
    }
    #reviews table tr.reviewuserinfo div {
      display:block
    }
    #reviews table tr.reviewuserdata {
      background-color:#ffffff;
      height: 315px;
      border-left:1px solid #ffffff;
      vertical-align: top;  
    }
    #reviews table td h2 {
        position:relative;
        display:inline-block;
        white-space:nowrap;
        font:24px/24px DinWebCond,Sans-serif;
        margin:0px;
        text-transform:uppercase;
        /**padding:20px 0px 9px 15px;*/
        /**padding-top:20px;*/
        /**padding-left:20px;*/
    }
    #reviews table td h2 img.stars {
        position:absolute;
        margin-left:10px;
        display:inline-block;
    }
    #reviews table td h2 span.rating{
        position:absolute;
        margin-left:145px;
        display:inline-block;
        color:#e85a06;
        font-weight:bold;   
    }

    table.reviewchart {
        position:relative;
        display:inline-block;
        white-space:nowrap;
        border-collapse: collapse;
        font:14px/14px DinWebCond,Sans-serif;
        margin:0px;
        text-transform:uppercase;
        /**padding:20px 0px 9px 15px;*/
        padding-top:20px;
        padding-left:20px;  
    }
    table.reviewchart td.reviewlabel{
        /**padding-top:15px;*/
        padding-bottom:15px;
    }

更新

好的，我可以通过添加colspan of 3来修复文本的宽度位置，但是“旅行者”这个词仍然向右推。我尝试设置边距和填充但不起作用。

这是我目前的进展：

Answer 1

晚会，但是，colspan="3"是必需的。然后，您可以执行的操作是将width="1%"添加到包含图片的单元格中，并更新您的css，以便为图片添加margin: 10px;而不是margin: 10px 0 10px 10px;。那应该解决它。

＆＃13;

   .page {
     position: relative;
     background-color: #ffffff;
     width: 1200px;
     margin: 0px auto;
     box-sizing: border-box;
     border-left: 1px solid #d0d0d0;
     border-right: 1px solid #d0d0d0;   
    }
    table {
     border:0px;
     width:100% 
    }
    table.reviewsouter .reviewleft{
     width:800px
    }
    table.reviewsouter .reviewright{
     width:400px
    }
    #reviewspotlight {
     position: relative;
     background-color:#000000;
     height:111px;
     z-index:19997;
     font-family: DinWebCond, Sans-serif;
     color:#ffffff;
    }
    #reviews {
      position: relative;
      background-color:#ffffff;
      color:#000000;
      border-right:1px solid #d0d0d0;
    }
    #reviews table tr.reviewuserinfo {
      background-color:#f0f0f0;
      height:60px;
      border-left:1px solid #d0d0d0;      
    }
    #reviews table tr.reviewuserinfo img.avatar{
      position:relative;
      width:40px;
      height:40px;
      margin:10px;
      display: inline-block;
      vertical-align: middle;
    }
    #reviews table tr.reviewuserinfo div {
      display:block
    }
    #reviews table tr.reviewuserdata {
      background-color:#ffffff;
      height: 315px;
      border-left:1px solid #ffffff;
      vertical-align: top;  
    }
    #reviews table td h2 {
        position:relative;
        display:inline-block;
        white-space:nowrap;
        font:24px/24px DinWebCond,Sans-serif;
        margin:0px;
        text-transform:uppercase;
        /**padding:20px 0px 9px 15px;*/
        /**padding-top:20px;*/
        /**padding-left:20px;*/
    }
    #reviews table td h2 img.stars {
        position:absolute;
        margin-left:10px;
        display:inline-block;
    }
    #reviews table td h2 span.rating{
        position:absolute;
        margin-left:145px;
        display:inline-block;
        color:#e85a06;
        font-weight:bold;   
    }

    table.reviewchart {
        position:relative;
        display:inline-block;
        white-space:nowrap;
        border-collapse: collapse;
        font:14px/14px DinWebCond,Sans-serif;
        margin:0px;
        text-transform:uppercase;
        /**padding:20px 0px 9px 15px;*/
        padding-top:20px;
        padding-left:20px;  
    }
    table.reviewchart td.reviewlabel{
        /**padding-top:15px;*/
        padding-bottom:15px;
    }

＆＃13;

<div id="reviews">
    <table cellpadding="0" cellspacing="0">
        <tr class="reviewuserinfo">
        <td width="1%"><img class="avatar" src="/avatar/35274"/></td>
        <td>Traveler<br>posted on 15 May, 2008</td>
        <td align="right" style="padding-right:15px">Joined 2 years ago<br>12 reviews and 49 comments posted</td>
        </tr>
        <tr class="reviewuserdata">
        <td style="width:100%" colspan="3">
            <table cellpadding="0" cellspacing="0" class="reviewchart">
                <tr><td><h2>Overall Rating <img class="stars" src="/stars/3.9/large" /> <span class="rating">4.5</span></h2></td></tr>
                <tr>
                    <td>
                        <table cellspacing="0" cellpadding="0">
                            <tr><td class="reviewlabel" style="padding-top:15px">QUALITY OF THE DANCERS</td></tr>
                            <tr><td class="reviewlabel">PRIVATE DANCES, VALUE FOR MONEY</td></tr>
                            <tr><td class="reviewlabel">OVERALL HOSPITALITY</td></tr>
                            <tr><td class="reviewlabel">GUEST TO DANCER RATIO</td></tr>
                            <tr><td class="reviewlabel">VARIETY OF DANCERS</td></tr>
                            <tr><td class="reviewlabel">VALUE FOR MONEY, COVER CHARGE</td></tr>
                            <tr><td class="reviewlabel">VALUE FOR MONEY, DRINKS</td></tr>
                            <tr><td class="reviewlabel">VALUE FOR MONEY, FOOD</td></tr>
                            <tr><td class="reviewlabel">OVERALL ATMOSPHERE</td></tr>
                            <tr><td class="reviewlabel">SOUND SYSTEM AND DJ</td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
        </tr>
    </table>    
  </div>

＆＃13;

Answer 2

带有图像的列之后的所有内容都是一个大列。你告诉它它是正确的，所以它将所有东西都移到那一列的最右边。删除它或使其对齐=＆＃34;左＆＃34;它应该解决你的问题。

无法获取表格数据以减少宽度

2 个答案: