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> </td>
</tr>
</table>
</div>
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> </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.
div.flist{width:500px;}
div.flist table{width:100%;}
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>
Just write table tag like this
<table width=100%></table>
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>
Related
This question already has answers here:
HTML -- two tables side by side [duplicate]
(4 answers)
Closed 6 years ago.
This is how the display currently looks:
This is how I want it to look:
.d1{
background:#F0F0F0;
border: 1px solid #A4A4A4;
}
#designs input, #itemz input{
height:19px;
font-size: 15px;
}
#designs #fds_image {
background-size: 190px 221px;
height: 221px;
width: 190px;
overflow:hidden;
}
#designs #fds_image img{
width: 190px;
}
<table id="designs" width="auto" align="center" border="0" bgcolor="#EBEBEB" cellspacing="5">
<tbody>
<tr>
<td class="d1" name="item">
<div id="fds_image">
<button class="preview_switch">M</button>
</div>
<hr>
<div class="bottom_bar">
<button name="preview" data-original="m">Preview</button>
<br>
<tbody>
<td class="d1" name="item">
<div id="fds_image">
<button class="preview_switch">M</button>
</div>
</div>
<hr>
<div class="bottom_bar">
<button name="preview" data-original="m">Preview</button>
I tried to do many things and researched online, but for some reason, it is not working. How can I make the tables display side-by-side, like I've shown?
You can override the default display: table to inline-table.
table {
display: inline-table;
}
Example of horizontally align multiple <table> elements.
body {
text-align: center;
}
table {
width: 100px;
height: 200px;
border-collapse: collapse;
display: inline-table;
}
td {
border: 1px solid grey;
}
tr:first-child {
height: 100%;
}
<table>
<tbody>
<tr>
<td>Content</td>
</tr>
<tr>
<td><button>Button</button></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Content</td>
</tr>
<tr>
<td><button>Button</button></td>
</tr>
</tbody>
</table>
You could try floating the tables.
table {
float: left;
}
You can make a bigger table that holds both of your tables currently side by side.
<table style="margin: auto;">
<tbody>
<tr>
<td><!-- Your first table --></td>
<td><!-- Your second table --></td>
</tr>
</tbody>
</table>
I have been having some trouble figuring this out so I have decided to include both my html and css in full this time.
I want my calendar section to be centered on the page below my header section which is to be fixed at the top of the page. I want my code to be dynamic so I am using translate to center my calendar.
When I view my code using IE or Edge the calendar is set in front of my header (centered horizontally but not vertically).
Could this have to do with my using positioning along with transforms?
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet2.css"/>
<title></title>
<!--------------------------header--------------------------->
<div id="headerDiv">
<div id="titleDiv">
<p id= "titleText"> Title </p>
</div>
<ul id="navUL">
<li>Home</li>
<li>Browse</li>
<li>Stats</li>
<li>Calculator</li>
<li>Blaster</li>
</ul>
</div>
</head>
<!--------------------------calendar------------------------->
<body>
<div class="calendar">
<div>
<p class="month">December</p>
<table>
<tr>
<th class="cell">Sunday</th>
<th class="cell">Monday</th>
<th class="cell">Tuesday</th>
<th class="cell">Wednesday</th>
<th class="cell">Thursday</th>
<th class="cell">Friday</th>
<th class="cell">Saturday</th>
</tr>
<tr>
<td class="cell">29</td>
<td class="cell">30</td>
<td class="cell">1</td>
<td class="cell">2</td>
<td class="cell">3</td>
<td class="cell">4</td>
<td class="cell">5</td>
</tr>
<tr>
<td class="cell">6</td>
<td class="cell">7</td>
<td class="cell">8</td>
<td class="cell">9</td>
<td class="cell">10</td>
<td class="cell">11</td>
<td class="cell">12</td>
</tr>
<tr>
<td class="cell">13</td>
<td class="cell">14</td>
<td class="cell">15</td>
<td class="cell">16</td>
<td class="cell">17</td>
<td class="cell">18</td>
<td class="cell">19</td>
</tr>
<tr>
<td class="cell">20</td>
<td class="cell">21</td>
<td class="cell">22</td>
<td class="cell">23</td>
<td class="cell">24</td>
<td class="cell">25</td>
<td class="cell">26</td>
</tr>
<tr>
<td class="cell">27</td>
<td class="cell">28</td>
<td class="cell">29</td>
<td class="cell">30</td>
<td class="cell">31</td>
<td class="cell">1</td>
<td class="cell">2</td>
</tr>
</table>
</div>
</body>
</html>
CSS
/*-------------------header----------------------*/
body{
margin:0px;
}
#headerDiv{
position: fixed;
height:12%;
width:100%;
background-image:url("Gradient.png");
background-repeat:repeat-x;
text-align: center;
}
#titleDiv{
width: auto;
margin: auto 0;
}
#titleText{
color:#ff6600;
font-size:130%;
text-allign:center;
font-family:verdana,san serif;
}
#navUL{
list-style-type:none;
margin: auto 0;
padding:0;
border-top:1 solid;
border-right:1 solid;
border-left:1 solid;
width:100%;
}
#navUL li{
padding: .2em 1em;
color: #fff;
background-color: #036;
display:inline-block;
text-align:center;
}
/*------------------calendar--------------------*/
.calendar{
text-align:center;
float:left;
background-color:#ffeeff;
height:80%;
width:70%;
position:relative;
top:80%;
left:50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.month{
padding-bottom:-20%;
font-size:260%;
text-align:center;
}
table,th,td{
border: 1px solid black;
text-align:center;
}
table{
text-align:center;
margin: 0 auto;
border-collapse: collapse;
width:100%
}
Your header should be in the body. If you want the calendar centered try either the following:
Include text-align:center in the body or..
Margin:auto in .calender or..
TranslateX(-50%) and margin-left: -35% or use pixels for width like 300px and then use margin-left: -150px which centers it.
If it doesnt work try absolute positioning. I hope this helps :).
I have a table in html.
The content of this table is text and an image. I would align the text in the top-left corner and the image in the middle (vertical-align).
I tried in this way:
CSS:
table td {border-collapse: collapse;}
#tabella {border: 1px solid black; text-align: left; vertical-align: top;}
#variante {vertical-align: middle;}
HTML:
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text
<br>
<img id="variante" width="75" border="0" src="www.favetta.com/image.png">
</td>
But in this way I obtain all (text and image) aligned in the top-left corner of the cell.
Any suggestion?
Are you doing this for an email? If so inline styling is fine (although won't work in all email clients so have a default.
If email do something like...
<table>
<tr>
<td align="center">
<table width="100%">
<tr>
<td align="left">This is text</td>
</tr>
</table>
<br/><br/>
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
<br/><br/><br/><br/>
</td>
</tr>
<table>
It looks crude but some browsers and email clients will ignore 'height='. This is purely what Ive found from years of email templating.
If not email, try and avoid tables - but if you can't then try something like...
<table>
<tr>
<td class="content">
This is text
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
</td>
</tr>
<table>
css
table{
border:1px solid grey;
width:100%;
}
.content{
text-align:left;
}
.content img{
width:75px;
vertical-align:middle;
transform: translate(-50%, -50%);
margin: 100px 50% 50px 50%;
}
https://jsfiddle.net/qbss1f0t/
Here is a simple example:
table{
border:1px solid #000;
}
table tr{
height:200px;
}
table td{
width:200px;
text-align:center;
}
.textNode{
text-align:left;
padding:0;
margin:0;
vertical-align:top;
}
.imgNode img{
width:75px;
margin: auto;
}
<table>
<tr>
<td class="textNode">This is text</td>
<td class="imgNode"><img src="http://s27.postimg.org/fs9k8zewj/cow1.png"></td>
</tr>
<table>
Here is a fiddle
This should get you to where you want.
Side Note: inline styling is not a good practice.
Use this may help you
<table width="100%">
<tr>
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text</td>
<td><img id="variante" width="75" border="0" src="www.favetta.com/image.png"></td>
</tr>
<table>
Just cannot imagine how to do a single table cell border black. Just like it is in excel - whole table TD borders are, for example, white, and selected cell has black border.
The obvious solution is to change borders of the nearest cells as well, but the table is dynamically generated ant it takes too much effort to calculate current cell's neighbours. Although, the current cell is known from the "click" event, so it would be great to achieve that styling it.
Tried to put the div inside but cannot align it without specifying cell and div sizes exactly in pixels, that is not portable.
Please help!
Sorry, thought it's obvious without code. Actually, I don't have a code that's working, but currently I'm trying that (wrote just a quick sample, sorry):
https://jsfiddle.net/a549b6t1/10/
<table>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td id="selected">
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr> <tr>
<td>
<div>
<input type="text">
</div>
</td>
<td> <div>
<input type="text">
</div>
</td>
<td> <div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
</table>
And css (dunno why, this site asks me to paste the code here)
table
{
border-collapse: separate;
border-spacing: 0;
padding: 0;
border: 0px solid #ffffff;
margin: 1em;
}
td
{
font-size: 1rem;
empty-cells: show;
border: 1px solid rgba(230,222,255,1);
padding: 0;
}
td#selected
{
font-size: 1rem;
empty-cells: show;
border: 1px solid rgba(0,0,0,1);
padding: 0;
}
tr:nth-child(odd)
{
padding: 0px;
margin: 0;
background: #efedee;
border: 0px solid transparent;
overflow: visible;
}
tr:nth-child(even)
{
padding: 0px;
margin: 0;
background: #f6f4f5;
border: 0px solid transparent;
overflow: visible;
}
input[type=text]
{
background: rgba(255,255,255,0);
border: 0px solid rgba(255,255,255,1);
margin: 0;
padding: 5px;
height: 1rem;
}
Hope it will help to understand the problem
This is how I want it to llok like
This is how it really looks like now
Solution provided by Shaggy : https://jsfiddle.net/a549b6t1/14/
Thank you!
Adjusting the adjacent cell borders is still going to cause you a problem as, on the cell above, for example, you'll have the left and right borders cutting in to the bottom border slightly as illustrated in this snippet:
div{
border:10px solid;
border-color:#000 #f00 #090 #009;
height:100px;
width:100px;
}
<div></div>
Instead, what you're going to need to do is collapse the borders of your table and then, for the active cells, use an absolutely positioned pseudo element to create the highlighted border, setting all 4 positioning values to the negative pixel value of the size of your border.
Here's a quick example using :hover to illustrate the principle:
*{box-sizing:border-box;}
table{
border-collapse:collapse;
}
td{
border:5px solid #ccc;
background:#eee;
height:100px;
position:relative;
width:100px;
}
td:hover::before{
border:5px solid #000;
bottom:-5px;
content:"";
left:-5px;
position:absolute;
right:-5px;
top:-5px;
z-index:1;
}
div{
position:relative;
z-index:2;
}
div,input{
width:100%;
}
<table>
<tbody>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
</tbody>
</table>
As an alternative, rather than giving each individual cell an initial border, you could use border-spacing instead, like so:
*{box-sizing:border-box;}
table{
background:#ccc;
border-spacing:5px;
}
td{
background:#eee;
height:100px;
position:relative;
width:100px;
}
td:hover::before{
border:5px solid #000;
bottom:-5px;
content:"";
left:-5px;
position:absolute;
right:-5px;
top:-5px;
}
div{
position:relative;
z-index:2;
}
div,input{width:100%;}
<table>
<tbody>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
</tbody>
</table>
You can use jquery to get current cell and then change its class to other class that defines visible borders
jquery :
$("#cell").click(function() {
$(this).toggleClass('not-selected selected');
});
css :
.not-selected{
border: 0px;
}
.selected{
border: 1px solid black;
}
I want to make first input have the width 100% and second + image = 100% so that second input get the rest of the space (100%-img size) on the same line. Is it possible to do using CSS?
<html><head><title>width test</title>
<style type="text/css">
.t {
width: 100%;
table-layout:fixed;
}
.caption {
text-align: left;
width: 35%;
}
.data {
text-align: left;
width: 65%;
}
.edt {
width: 100%;
}
</style>
</head>
<body>
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td class="data">
<input type="text" class="edt" /><img width="22px" src="cal.png" />
</td>
</tr>
</table>
</body>
</html>
Yes, this can be done with CSS. The trick is to use display: table and display: table-cell, where where width: 100% means "the rest of the available space".
Here is an example (with wrapper divs around .edt and the image link for better result): http://jsfiddle.net/zgw8q7vj/
The important CSS parts are these:
/*Use "table" layout in the 'data' cells,
and give them all the available width (after the captions)*/
.data {
display: table;
width: 100%;
}
/*Then give the textbox all the available remaining width...*/
.edt-wrapper {
display: table-cell;
width: 100%;
}
/*...after the image has claimed the space it needs*/
.img-wrapper {
display: table-cell;
}
If you don't want the caption column to take more space than it needs, you can even remove table-layout:fixed; and width: 35%; from .t and .caption
untested.
you didn't mention colspans can't be used, so this solution uses it.
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td colspan="3"><input type="text" class="edt" /></td>
<td class="data"><img width="22px" src="cal.png" />
</td>
</tr>
</table>
I have found that I can do it with tables. The question still remain, is it possible to do with div/css?
<html><head><title>width test</title>
<style type="text/css">
.t {
width: 100%;
table-layout:fixed;
}
.caption {
text-align: left;
width: 35%;
}
.data {
text-align: left;
width: 65%;
}
.edt {
width: 100%;
}
.joiningtable
{
border-spacing:0px;
border-collapse:collapse;
width:100%;
margin:0px;
border:0px;
padding:0px;
}
.joiningrest
{
width:100%;
margin:0px;
border:0px;
padding:0px;
}
.joiningfixed
{
margin:0px;
border:0px;
padding:0px;
}
</style>
</head>
<body>
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td class="data">
<table class="joiningtable">
<tr><td class="joiningrest"><input type="text" class="edt" /></td><td class="joiningfixed"><img src="cal.png" /></td><tr>
<table>
</td>
</tr>
</table>
</body>
</html>
If you're still interested, it is possible but you need to use a little magic..
With absolute positioning, you can stretch those entry fields as wide as you like, or rather, you make them stretch to 100% and put them inside spans that stretch as wide as you like because input fields are stubborn things and won't behave otherwise.
<html>
<body>
<div style="background-color:#DDDDFF; position:absolute; left:10px; top:10px; right:10px; height:80px;">
<span style="position:absolute; left:10px; top:10px;">Caption</span>
<span style="position:absolute; left:10px; top:40px;">Caption</span>
<span style="position:absolute; left:70px; top:10px; right:10px;">
<input type="text" style="width:100%" />
</span>
<span style="position:absolute; left:70px; top:40px; right:40px;">
<input type="text" style="width:100%" />
</span>
<img style="width:22px; position:absolute; top:40px; right:10px;" src="cal.png" />
</div>
<div>
</div>
</body>
</html>
P.S. I've left the style definitions on the entities for simplicity. In a real-world case, I'd move them to a .css file of course.