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.
Related
I have below snippet where td takes up space unnecessarily. For e.g. if the text contents inside td take 20 pixels width, td should also be 20 pixels wide. Can you help me fix it?
tr {
width: 100%;
}
.td2{
width:auto;
max-width: 180px;
word-wrap: break-word;
background-color:red;
padding-left: 0;
padding-right: 0;
}
span {
background-color: #7e7;
}
<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>
<table>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive exhaust materialssss</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
</table>
By default, table cells will expand in order to fit all their content and the width of the cell will depend on the widest cell in that column.
So trying to shrink-wrap a table-cell doesn't really make much sense.
If you do actually want a table-like layout, but you want a particular column to take up as little space as possible - you could set the cell width: 1px; - that will make the column as wide as the longest word in the cells of that column.
table {
table-layout: fixed;
}
tr {
width: 100%;
}
.td2{
width:auto;
max-width: 180px;
word-wrap: break-word;
background-color:red;
padding-left: 0;
padding-right: 0;
width: 1px; /* <--- */
}
span {
background-color: #7e7;
}
<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>
<table>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive exhaust materialssss</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
</table>
Please replace this code with your old code.
I hop here you find your solution.
tr {
width: 100%;
display:table-row;
}
tr td
{
display:inline-block;
}
.td2{
width:auto;
word-wrap: break-word;
background-color:red;
padding-left: 0;
padding-right: 0;
max-width: 180px;
}
.text{
max-width: 180px;
font-size: 14px;
}
span {
background-color: #7e7;
}
<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>
<table>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span class="text">Excessive exhaust materialssss</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
</table>
try adding the following css code
tr {
width: 100%;
display:table-row;
}
tr td
{
display:inline-block;
}
here is a link for reference
hope this helps..
I have a table that fills its container's width. It has three columns. Two columns have a fixed width while the third must expand to fill the remaining width. The width of the table is dynamic.
I can get this to work if a row's height may expand, but I need each row to only have a single line of text. If the text is too long then it must be cut off.
Code + examples: (https://jsfiddle.net/o044tq53/5/)
EDIT: I rewrote the above description and updated the jsfiddle with an example showing what it should look like.
#wrapper {
width:200px;
background:white;
}
table {
border-collapse:collapse;
text-align: left;
width:100%;
margin-bottom:30px;
}
div {
overflow:hidden;
white-space: nowrap;
text-align:left;
}
.td_col_two {
width:100%;
}
.col_one_div {
width:90px;
background: red;
}
.col_two_div {
background: lightblue;
overflow:hidden;
}
.col_three_div {
width:20px;
background: lightgreen;
}
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class = "col_one_div">
Robin
</div>
</td>
<td class = "td_col_two">
<div class = "col_two_div">
nowrap does not work for long text.
</div>
</td>
<td>
<div class = "col_three_div">
x
</div>
</td>
</tr>
</table>
Consider using display:flex and flex:1(flex-grow:1)
check this snippet
#wrapper {
background: white;
display: flex;
flex-direction: column;
border:1px solid black;
}
#wrapper table {
flex: 1;
width: 100%;
}
table,
tr,
td {
border: 1px solid;
}
#table-two div {
word-wrap:break-all;
}
.td_col_two {
width: 100%;
}
.col_one_div {
background: red;
}
.col_two_div {
background: lightblue;
}
.col_three_div {
width: 20px;
background: lightgreen;
}
<div id="wrapper">
<table id="table-one">
<tr>
<td>
<div class="col_one_div">
Robin
</div>
</td>
<td class="td_col_two">
<div class="col_two_div">
Short works
</div>
</td>
<td>
<div class="col_three_div">
x
</div>
</td>
</tr>
</table>
<table id="table-two">
<tr>
<td>
<div class="col_one_div">
Robin
</div>
</td>
<td class="td_col_two">
<div class="col_two_div">
White-space normal also works.
</div>
</td>
<td>
<div class="col_three_div">
x
</div>
</td>
</tr>
</table>
<table id="table-three">
<tr>
<td>
<div class="col_one_div">
Robin
</div>
</td>
<td class="td_col_two">
<div class="col_two_div">
nowrap does not work for long text.
</div>
</td>
<td>
<div class="col_three_div">
x
</div>
</td>
</tr>
</table>
</div>
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>
My IFrame doesn't fill the cell in Explorer but does in Chrome. What gives? To fix in Explorer I have to hard code px the height and width. Any ideas why this is happening?
<style type="text/css">
.styleTbl
{
margin-bottom:10%;
margin-left:10%;
width:80%;
}
.styleBg
{
background: #00aced;
}
.style_logo
{
width:80%;
margin-left:10%;
}
.styleObj img
{
width: 100%;
}
iframe
{
background-color:#ffffff;
border-color:#eee9e9 ;
border-width:4px;
height: 99%;
width:99%;
margin:1px;
}
</style>
</head>
<body class="styleBg" onLoad="GetNewsSource()">
<table class="style_logo">
<tr>
<td>
<img alt="logo_banner Missing" class="style_logo" longdesc="Banner" src="logo_banner1.png" align="left"/>
</td>
<td>
<img alt="spinning_wheel" longdesc="Gif" src="Live.gif"style="height: 110px; width: 180px; " align="middle"/>
</td>
</tr>
</table>
<br />
<table class="styleTbl">
<tr>
<td height="100%" width="50%" rowspan="2">
<iFrame src="index.html"scrolling="no"></iFrame></td>
<td class="styleObj">
<img alt="png1" class="styleObj" longdesc="png1" src="png1.png"/></td>
</tr>
<tr class="styleRow">
<td class="styleObj">
<img alt="png2" class="styleObj" longdesc="png2" src="png2.png"/></td>
</tr>
<tr>
<td>
<img alt="png3" width=100% longdesc="png3" src="sentiment.png"/></td>
<td class="styleObj">
<img alt="png3" class="styleObj" longdesc="png3" src="png3.png"/></td>
</tr>
</table>
</body>
</html>
The issue is with using both percentages and pixel measurements for your iframe. Let's say you have a container width of 1000px. 99% of this is 990px, however applying a 1px margin to this results in a total internal width of 992px, leaving 8px for white space.
If you wanted to code this so no gaps would show, you should use a percentage for the margin also; 0.5% would return 4px for both sides in this example, leaving 0px of white space.
I suggest changing IFrame styling code to:
iframe
{
background-color:#ffffff;
border-color:#eee9e9 ;
border-width:4px;
height: 99%;
width:99%;
margin:0.5%;
}
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>