CODEWITHSUNDEEP
htmlcsshtml-table
Merle_the_Pearl
Merle_the_Pearl

Reputation: 1521

Table Not 100% Width of Div Element

I'm trying to get a table to be 100% width of a div...

But when I use width=100% it expands outside of the borders... When using on different devices...

So I'd just like this table, across full width - and the N/A button right aligned...

Seems it is always extending past borders on different devices...

 <div class=flist>
<table cellpadding=2 border=1>
<tr>
<td valign=middle>
      <img src="images/plus.png" height=14 width=14 border=0 align=middle> <b>General Stuff</b>
</td>
<td align=right>
      <input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td>&nbsp;</td>
</tr>
</table>    
 </div>

Upvotes: 2

Views: 19380

Answers (5)

shruti garg
shruti garg

Reputation: 332

Just write table tag like this

<table width=100%></table>

Upvotes: 1

Merle_the_Pearl
Merle_the_Pearl

Reputation: 1521

This might have worked

Added this also into table style="table-layout:fixed"

.flist { 
font-family: Verdana; font-size: 13pt; font-weight: bold;
overflow: hidden; 
position: relative;
background-color: #e9e9e9;
padding: 5px;
margin-top: 5px;
margin-left: 1%;
margin-right: 1%;
border: 1px solid #000;
}

.flist > table 
{ 
width: 100%; 
} 

<div class=flist>
<table cellpadding=2 border=0 style="table-layout:fixed">
<tr>
<td valign=middle>
<b>General</b>
</td>
<td align=right>input type="button" name="CheckAll" value="All N/A" class=verd8></td>
</tr>
</table>    
</div>

Upvotes: -1

Philip
Philip

Reputation: 4592

This should work in most cases. if you need mobile, use media queries instead. Adding 1% each side is = 20px so just minus that from the table width. 1% = 10px;

*{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
 }
table{
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  empty-cells:show;
}
table.bordered{
  border-collapse:separate;
  border:1px solid #ccc;
  border-radius:4px;
}
th,td{
  vertical-align:top;
  padding:0.5em;
}
tr:nth-child(2n){
  background-color:#f5f5f5;
}

-

<table class="bordered">
    <tbody></tbody>
</table>

Upvotes: 1

ant
ant

Reputation: 22948

Take this example :

<html>
<body>
<head>
<style>
.flist{
border:1px solid red;
padding:5px;
width:500px;
}
table{
width:100%;
border:1px solid;
}
</style>
</head>
<div class="flist">
<table cellpadding="2" border="1">
<tr>
<td valign=middle>
     <b>General Stuff</b>
</td>
<td align=right>
      <input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td>&nbsp;</td>
</tr>
</table>    
 </div>
</body>
</html>

Just an inline css example, but it works if you change .flist width the table width changes, note the red color of the .flist versus black of table.

Upvotes: 3

maiorano84
maiorano84

Reputation: 11971

div.flist{width:500px;}
div.flist table{width:100%;}

Upvotes: 2

Related Questions