Displaying a table next to a fixed width span - html

I have a html <table> that have dynamic width (changes with window size), and a fixed width <span> (500px).
I want to display both next to each other so that both would fill the whole width of the parent container
I want to do so only using CSS (not js)
I have been playing around with CSS but it seems to be ruining the table's width
HTML
<div class='container'>
<table class='table'>....</table>
<span class='span'>....</span>
</div>
CSS
.container {
......
}
.table {
.....
}
.span {
width: 500px;
display: inline-block; //or block if neccessary
}

You may give a try with the table-layout propertie to .container and span.
Browsers should create themselves the element missing to produce the first table-cell.
DEMO
span {
display:table-cell;
width:500px;
border:solid;
}
table {
border:solid;
margin:0;
width:100%;
}
.container {
display:table;
width:100%;
table-layout:fixed;
}
This should work
because of table-layout:fixed
and because browser should create themselves the missing element (like a tbody is always produced in a <table> when missing or when in a document is missing either tags like html or body ).

Demo
css
body, html {
margin:0;
padding:0;
}
.container {
}
table {
width: calc(100% - 500px);
border-collapse: collapse;
float: left;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
.span {
display: inline-block;
width: 500px;
height: 100px;
background: red;
}
html
<div class='container'>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gaurav</td>
<td>Singh</td>
<td>etc</td>
</tr>
<tr>
<td>Gaurav</td>
<td>Singh</td>
<td>etc</td>
</tr>
</tbody>
</table> <span class='span'>....</span>
</div>

Related

Adjust HTML table colum size both with percent and fixed sizes?

I want to create a table with the following widths of columns.
Is it possible to use both percents and absoulte widths as shown in my graphic?
This is because some columns make no sense below a certain width and always need the same width and others are more flexible.
Here you go:
#fixed{
table-layout:fixed;
}
td{
border:1px solid red;
}
td:nth-child(even){
background-color: grey;
}
<table id="fixed" border="0" style="width:100%;border-collapse:collapse;">
<tr>
<td style="width:50px;">1</td> <!--Fixed width-->
<td style="width:50%">Title</td>
<td style="width:50%">Interpret</td>
<td style="width:20px">1</td>
</tr>
</table>
What I could understand, you can achieve this by applying styles with table i.e table-layout: fixed; and width:100%;. Also width of td using px and %. According to your design, you are using four columns and I wrote code for the four columns;
Following would be your CSS;
table {
table-layout: fixed;
width: 100%;
}
td:first-child {
width: 50px;
}
td:last-child {
width: 20px;
}
.second-column {
width: 50%;
}
.third-column {
width: 50%;
}
td:nth-child(odd) {
background-color: grey;
}
td:nth-child(even) {
background-color: silver;
}
<table>
<tr>
<td>1</td>
<td class="second-column">2</td>
<td class="third-column">3</td>
<td>4</td>
</tr>
</table>
Hope this is what you required.

CSS - 100 height in a tablecell

I have a table cell with various height.
I want to have 1 or more spans in the last cell with some requirements:
height must be equal of the full row height, most imortant
width must be equal to the spans. So exactly fit to the right and no whitespace on the left.
I can not find the solution.
The CSS:
* {
box-sizing:border-box;
}
table {
width:100%;
}
td { border:1px solid blue; }
input {
height:50px;
}
.buttons {
width:1px;
white-space:nowrap;
}
.button {
padding:5px 20px;
background:red;
display:inline-block;
}
And the HTML:
<table>
<tr>
<td><input value="I have height of 50px" /></td>
<td class="buttons">
<span class="button" title="I have width of 25px">+</span>
<span class="button" title="I have width of 25px">+</span>
</td>
</tr>
</table>
I tried position relative/absolute on the last td and a container for the buttons, but then it will fall outside the table
Ofcourse i tried height:100%, no difference
http://jsfiddle.net/70a6q5kz/3/
--edit
Solution
I found this solution:
Css:
table { height:100%; }
.buttons { height:100% }
Full solution:
http://jsfiddle.net/70a6q5kz/11/
In the css you could remove the padding from td, create the .button:last-of-type and insert a margin-right:-1px on it
* {
box-sizing:border-box;
}
table {
width:100%;
}
td {
border:1px solid blue;
padding: 0; /********************************/
}
input {
height:50px;
}
.buttons {
width:1px;
white-space:nowrap;
padding: 0;
}
.button:last-of-type{ /*************************/
margin-right:-1px; /*************************/
} /*************************/
.button {
padding:15px 20px;
background:blue;
display:inline-block;
height:50px;
}
The html can stay the same
Possible Solution
I found this as an possible solution. In simple words:
Css:
table { height:100%; }
.buttons { height:100% }
Full solution:
http://jsfiddle.net/70a6q5kz/11/
Works in IE 11, FF and chrome
You could do something with flex. You also need to remove the initial padding of the tds.
Check snippet:
* {
box-sizing: border-box;
}
table {
width: 100%;
}
td {
border: 1px solid blue;
padding: 0; /* remove initial padding */
}
input {
height: 50px;
}
.buttons {
display: flex;
white-space: nowrap;
}
.button {
flex: auto;
width: 25px;
background: red;
text-align: center;
}
<table>
<tr>
<td><input value="I have height of 50px" /></td>
<td>
<div class="buttons">
<span class="button" title="I have width of 25px">+</span>
<span class="button" title="I have width of 25px">+</span>
</div>
</td>
</tr>
</table>

How to work with HTML table and make multiple rows with only one <tr>?

I need to change an html <table> in order to make it responsive,
But I want to work only with css
table{
width:100px;
height:100px;
background:green;
}
.a{
width:100% !important;
background-color:Red;
}
<table>
<tbody>
<tr>
<td class="a">AAA</td>
<td class="b">BBB</td>
<td class="c">CCC</td>
</tr>
</tbody>
</table>
What I want :
Without changing HTML, I want to have the AAA for the 100% width of the screen, and "BBB" + "CCC" below (under the AAA line with BBB : 50% width, and the "CCC" too in width)
I'm trying with no success, any help please ?
Are you against changing the default display: table; of the table ?
If no, you can do like this
.a{
width:100%;
background-color:Red;
}
.b, .c { width: 49%; display: inline-block }
table, tbody, tr, td { display: block; }
Fiddle
You can use float but that sort of negates the point of using a table in the first place.
If this isn't tabular data (and the layout suggests it's not) then you really should be looking for an alternative HTML structure.
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
width: 100%;
}
td {
width: 110px;
float: left;
width: 50%;
border: 1px solid grey;
}
td.a {
width: 100%;
}
<table>
<tbody>
<tr>
<td class="a">AAA</td>
<td class="b">BBB</td>
<td class="c">CCC</td>
</tr>
</tbody>
</table>

Make button occupy full height inside a TD element in IE9

I've been trying to make a button which is inside a td cell in IE9. It's working fine on chrome and firefox (although the latter involved bubbling up height:100% to the td, tr and table elements). Do you have any idea how can I solve this problem using only CSS?
Here's the HTML:
<table>
<tr>
<td>
<span class="stuff">stuff</span>
</td>
<td class="the-td">
<button class="problem-here">
<span>stuff</span>
<span>more stuff</span>
</button>
</td>
</tr>
<tr>
<td>stuff</td>
<td>stuff!</td>
</tr>
</table>
And the CSS:
table {
border-collapse: collapse;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
td, tr {
padding: 0;
margin: 0;
height: 100%;
}
tr {
border: 1px solid black;
}
.problem-here {
margin: 0;
padding: 0;
background: none;
border: none;
background: lightgreen;
width: 100%;
height: 100%;
}
.stuff {
line-height: 100px;
}
.the-td {
width: 70%
}
button span {
display: block;
}
And, finally, here's a fiddle with the problem: https://jsfiddle.net/vh3jodap/10/
Thanks in advance
EDIT: here's a pic of what's happening right now:
http://i.imgur.com/J3hbWTj.png?1
In IE, in order for an element to have height:100%;, all parent elements must have height:100%;.
Any parent missing the height:100%; will cause IE to ignore it all.
Warning There's a high probability your table will grow bigger entirely
Hope this helps!

width or height of child element doesn't change in CSS

Here is my DOM:
<html>
<body>
<table>
<tr>
<td>
hello
</td>
</tr>
</table>
</body>
</html>
and my CSS:
html, body {
height: 100%;
width: 100%;
}
table {
height: 100%;
width: 100%;
}
td {
border: 1px solid gray;
height: 10%;
width: 10;
}
What I want to do is to re-size the height and width of the TD element using percentage. But this code doesn't work. I understand that the size of a child element will inherit the size of it's parent element. So TD will inherit the size from TABLE and then TABLE from BODY or HTML parent elements. My code doesn't do that. But if I do width: 10%; on TABLE, then it gets 10% of the width of the BODY/HTML element. Same as with the height: 10%. But why doesn't it work on TD tag?
td tags are forced to take up all of the remaining space in their parent.
So, your width: 10%; is completely ignored by the layout.
See this non-working JSFiddle Demo.
But, if we add some display: inline-block; to the td, then it fixes the problem.
See this (now) working JSFiddle Demo.
I suggest you add another td tag, and give it a width of 90%
<table>
<tr class="tr1">
<td class=td1>
hello
</td>
<td class="td2"></td>
</tr>
<tr class="tr2">
<td></td>
</tr>
</table>
CSS:
html, body {
height: 100%;
width: 100%;
margin:0;
}
table {
height: 100%;
width: 100%;
}
td.td1 {
border: 1px solid gray;
height: 10%;
width: 10%;
}
td.td2{
border: 1px solid gray;
width: 90%;
}
tr.tr1{
height:10%;
}
tr.tr2{
height:90%;
}
For the height, you will need to add another tr row, and give it a 90%. Give the first row a 10% height like you wanted to do with the td - http://jsfiddle.net/R5uRW/6/