CODEWITHSUNDEEP
csstwitter-bootstrap
methuselah
methuselah

Reputation: 13216

Fix text positioning in table

How would I go about fixing the text position in the table?

Trying to make the blurb line up next to the video.

Trying to make the video details align to the right.

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>

Upvotes: 0

Views: 158

Answers (1)

Khushbu Vaghela
Khushbu Vaghela

Reputation: 619

You need to use display:block on the <tr> tag And remove width:100% on <td> tag.

@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>

May be this is what you want!!

Upvotes: 1

Related Questions