css - 修复表格中的文本定位

Question

我将如何固定表格中的文本位置？

尝试使宣传语在视频旁边排成一行。

试图使视频细节右对齐。

Jsfiddle:https://jsfiddle.net/wewc4dq5/1/

<div class="row" style="margin-bottom: 5em">
  <div class="col-sm-5">
    <table class="left-photo-table">
      <tr>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
      </tr>
      <tr>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
      </tr>
    </table>
  </div>
  <div class="col-sm-7" style="background-color: #D6E2FF; height: 310px;">
    <table class="right-content-table">
      <tr>
        <h4 style="padding: 0.5em;">Patricia Bright</h4>
      </tr>
      <tr>
        <td width="300px">
          <iframe style="padding-left: 1em;" width="300" height="210" src="https://www.youtube.com/embed/XQxdQrPPHC4?rel=0&amp;controls=1&amp;showinfo=0"
            frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </td>
        <td>
            <div style="width: 210px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur rhoncus aliquam. Mauris imperdiet tortor non lectus volutpat, et vestibulum lorem viverra.</div>
        </td>
      </tr>
      <tr width="100%">
          <td style="text-align: right; padding-top: 0.5em;"><div style="width: 500px;"></div>21 min 17 sec | 632,991 views | &#11088;&#11088;&#11088;&#11088;&#11088;</div></td>
      </tr>
    </table>
  </div>
</div>

Answer 1

您需要使用 display:block在 <tr> 上标签并删除 width:100%在 <td>标签。

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.left-photo-table {
    height: 310px;
    width: 100%;
    text-align: center;
    border-spacing: 1em;
    border-collapse: separate;
    vertical-align: middle;
}

.left-photo-table td {
    background-repeat: no-repeat;
    background-position: center;
    width: 33%;
}

.left-photo-table td:hover {
    cursor: pointer;
    filter: alpha(opacity=50);
    -moz-opacity: .50;
    opacity: .50;
}

<div class="row" style="margin-bottom: 5em">
  <div class="col-sm-5">
    <table class="left-photo-table">
      <tr>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
      </tr>
      <tr>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
        <td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
      </tr>
    </table>
  </div>
  <div class="col-sm-7" style="background-color: #D6E2FF; height: 310px;">
    <table class="right-content-table">
      <tr>
        <h4 style="padding: 0.5em;">Patricia Bright</h4>
      </tr>
      <tr style="display: block;"">
        <td width="300px">
          <iframe style="padding-left: 1em;" width="300" height="210" src="https://www.youtube.com/embed/XQxdQrPPHC4?rel=0&amp;controls=1&amp;showinfo=0"
            frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </td>
        <td>
            <div style="width: 210px; margin-left: 25px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur rhoncus aliquam. Mauris imperdiet tortor non lectus volutpat, et vestibulum lorem viverra.</div>
        </td>
      </tr>
      <tr width="100%">
          <td style="text-align: right; padding-top: 0.5em;"><div style="width: 500px;"></div>21 min 17 sec | 632,991 views | &#11088;&#11088;&#11088;&#11088;&#11088;</div></td>
      </tr>
    </table>
  </div>
</div>

也许这就是你想要的!!