CODEWITHSUNDEEP
htmlcss
ghadams
ghadams

Reputation: 41

Getting table row to span entire width

I am simply trying to get my table row to go all the way across the table, but it is only filling about 20% on the left side. 

<table id="t1" style="width:25%; height:50%">
<tr id="tr1">
  <td id="user1"></td>
  <td id="champ1"></td>
  <td id="wr1"></td>
</tr>
</table>

I put values in the data cells in a script later on. Here is the CSS.

#t1 {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}
tr {
  width: 100%;
  align-content: center;
}

Upvotes: 2

Views: 2656

Answers (4)

Isaac Wasserman
Isaac Wasserman

Reputation: 1541

First of all your code is a mess. It has mismatching tags and is just disorganized all together. Second of all, never use tables again. They are virtually deprecated. Everything you do with a table can be done with list these days. Tables are not even responsive. And just like you've discovered, they are temperamental. My answer: Use a <ul>

Upvotes: 0

J. A. Streich
J. A. Streich

Reputation: 1702

In your code you don't close the <td>'s, you have each terminated in a closing </tr> instead. If there is no content in the <td>, add a &nbsp;

The table rows (<tr>) will default to 100% of table if remove the display: inline-block, and terminate them correctly. The wrap them in something to make them float. This allows you opportunity to do a caption for the table or add controls.

I'd suggest the html:

<div class="wrapper">
  <div class="left">
    <table id="table1">
     <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
     </tr>
    </table>
  </div>
  <div class="right">
   <table id="table2">
     <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
     </tr>
   </table>
  </div>
</div>

css:

/* Optionally throw in a media query, so the floats only happen if there is enough room for the two tables next to each other, but seamlessly fall under each other if not -- @media screen and (min-width: 600px){*/
.left{float:left; width:50%;}
.right{float:right; width:50%;}
/* } Optionally, close the media query here. */
/* Keep the wrapper open until both tables are done*/
.wrapper:after{clear:both;} 
table{}
/* Add margin if the tables get to close, or negative margin if you want them closer*/

Upvotes: 1

Sean Stopnik
Sean Stopnik

Reputation: 1868

Your markup is a mess...

First, you are closing <td> with </tr>.

I have no idea what align-content: center; is? I think you mean text-align: center;.

You are sharing an #id on 2 selectors (id='tr1'). Not allowed.

Try fixing up some of that stuff first.

Upvotes: 1

Steve
Steve

Reputation: 9561

Remove the display: inline-block from the #t1 style.

This will also cause the table to center because of the auto margins, so remove these if you want the table left-aligned.

Example JSFiddle: http://jsfiddle.net/Lrog2pgm/

Upvotes: 1

Related Questions