Develop Reference

CSS messed up in mobile view

I have a simple nested table. Three columns - Name, Email,Contact. In the contact column, I have have two contact separated by a . This table gets stacked in the form of one row below the another in the mobile view.
Problem : Since the two contact numbers are separated by a break, in the mobile view it adds a huge space between the column headings. I just want to pick up "contact" heading in mobile(and not touch the numbers) and move it a little to reduce the space in between. Right now, whatever css I apply it moves the contact numbers along with it. Please suggest how can I do this ?
$(function() {
$(".fold-table tr.view").on("click", function() {
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
$('.view, table.child').each(function() {
$('.view:even, table.child:even').addClass('odd');
$('.view:odd, table.child:odd').addClass('even');
});
.tableComponent table.parent {
font-family: 'Poppins';
font-size: 12px;
width: 60%;
border: none;
border-collapse: separate;
border-spacing: 0 2px;
}
.tableComponent table thead th {
border-bottom: 0;
border-top: 0;
}
.tableComponent table td,
th {
border-top: 0px;
}
table.fold-table>tbody>tr.view td,
table.fold-table>tbody>tr.view th {
cursor: pointer;
}
table.fold-table>tbody>tr.fold {
display: none;
}
table.fold-table>tbody>tr.fold.open {
display: table-row;
}
.odd {
background-color: #F2F2F2;
}
.even {
background-color: #F8F8F8
}
table.child {
font-family: 'Poppins';
font-size: 12px;
width: 100%;
margin-top: -0.1rem;
border-top: 2px solid #DBDBDB;
}
table.fold-table>tbody>tr.fold.open>td {
padding: 0;
}
#media all and (max-width: 500px) {
.tableComponent table.parent {
width: 90%;
margin-left: 5vw
}
.tableComponent thead {
display: none;
}
.tableComponent tr {
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
.tableComponent td::before {
content: attr(col);
font-weight: bold;
padding-right: 20px;
width: 40vw;
display: inline-block;
}
table.child {
margin-top: -0.5rem;
}
.contactInfo {
display: inline-block;
margin-left: -0.2rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tableComponent">
<table class="table fold-table parent" id="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Contact</th>
</tr>
</thead>
<tbody>
<tr class="view">
<td col="Name">John</td>
<td col="Email">j#g.com</td>
<td col="Contact">
<span class="contactInfo">
35373726<br>
35373726
</span>
</td>
</tr>
<tr class="fold">
<td colspan="3">
<div class="fold-content">
<table class="child">
<tbody>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>

In css, the inline elements doesn't take margins, so vertical alignment can be done like so
#media all and (max-width: 500px){
.tableComponent td::before {
vertical-align: top;
}
}

If you change the col="Contact" td into a flexbox, it will behave the way you want it at that screen size.
[col="Contact"] {
display: flex;
}

HTML Table with curved linked heading [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to achieve this type of table so that I can have extended labels for columns. But I don't even know what it's called to try and describe it in a search.
Edit
I can find how to round html borders with CSS. But that doesn't help with linking rows to columns. I can rotate the column header text, but again, that isn't what I'm after.
The closest thing I can come up with is a full table with borders or a background colour to highlight the connection, but this would be squared instead of rounded.
I'm wondering if there is a method of achieving this with css. Or alternatively a library which would do the same thing.

I have never heard about something like this. In general, you cannot curve any element like that, supposing that link is normal part of table (tr/td).
I have created some small thing here, making the curvers, than you can add it over your table to make that feeling, but note, that you cannot write inside it, and most umportantly, it will not work, as this will not look precise across browsers and zoom (tested on another projects, where I needed also some circled things)
So you should better design your table in other way.
Anyway, here is a snippet with rounded linked things
.circ, .circ2, .circ3 {
position:absolute;
border-radius: 50%;
display: inline-block;
background-color: transparent;
border-top: 1px solid black;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
transform: rotate(45deg);
}
.circ{width: 180px;
height: 180px; top:0; left:0;}
.circ2{width: 135px;
height: 135px; top:23px; left:22px}
.circ3{width: 80px;
height: 80px; top:50px; left:50px;}
.container{position:absolute; top:20px; left:20px; border:1px dotted black;width:200px; height:200px;}
<div class="container">
<div class="circ"></div>
<div class="circ2"></div>
<div class="circ3"></div>
</div>
Als read this - this is full list of transforms, that browsers supports:
https://www.w3schools.com/cssref/css3_pr_transform.asp

This is a close mockup to what you were looking for
https://codepen.io/anon/pen/dZrXPd
I wrote part of it in SCSS because it's easier for me, and the snippet here is a compiled version of it...
ul {
list-style: none;
padding: 0;
width: 400px;
float: left;
}
ul li:nth-child(1) {
background-color: blue;
}
ul li:nth-child(2) {
background-color: green;
}
ul li:nth-child(3) {
background-color: red;
}
.clearfix:after {
display: block;
content: "";
clear: both;
}
.round-edges {
float: left;
width: 80px;
background-color: grey;
height: 70px;
margin-top: 15px;
border-radius: 0 50px 0 0;
position: relative;
}
.round-edges .round1 {
background-color: blue;
height: 70px;
width: 75px;
border-radius: 0 50px 0 0;
}
.round-edges .round2 {
background-color: green;
height: 50px;
width: 50px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 0 25px 0 0;
}
.round-edges .round3 {
background-color: red;
height: 33px;
width: 25px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 0 20px 0 0;
}
tr td:nth-child(1) {
width: 400px;
}
tr td:nth-child(2) {
background-color: red;
width: 20px;
text-align: center;
}
tr td:nth-child(3) {
background-color: green;
width: 20px;
text-align: center;
}
tr td:nth-child(4) {
background-color: blue;
width: 20px;
text-align: center;
}
<div class="clearfix">
<ul>
<li>
Last Col
</li>
<li>
Middle Col
</li>
<li>
First col
</li>
</ul>
<div class="round-edges">
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
</div>
</div>
<table>
<tr>
<td>
Something
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Some other thing
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Something Completely Different
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Foo
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
</table>

??? Use id or number + legend
#1 #2 #3
left mid right
L M R
Or, may be better, if you create image.
But, you can still use border-radius + position in table row. May be its not work cross-browser, as you wish.
http://border-radius.com
(write 40 to black input box on site, for example)

Keep height of children div constant

I wish to keep the height of the two children div's, abc and def constant, and each with height half that of their parent, xyz. I was able to do this using flex in CSS, but in each of the child div abc and def, I have tables in which rows are added dynamically. This causes the divs abc and def to expand to accommodate the rows.
I would like each of these to become scrollable when too many rows are added.
I have tried many solutions, but none of them seem to work.
Here is my code:
#xyz {
flex: 1 1 auto;
display: flex;
flex-flow: column;
}
#abc {
width: 100%;
flex: 1;
}
#def {
width: 100%;
flex: 1;
}
<div id="xyz" class="row">
<div id="abc" class="col-border-bottom container-fluid">
<h2>ABC details</h2>
<table id="abc-table"></table>
</div>
<div id="def" class="container-fluid">
<h2>DEF details</h2>
<table id="def-table"></table>
</div>
</div>
Thanks in advance.

If you are using a flexbox to get the overflow, you should wrap the flexbox child's contents into an absolutely positioned contanier so that it can scroll on overflow.
So here is the summary of what I've changed in your code:
To demonstrate the overflow, set a specific height for xyz container. You can change this height as per your requirement.
Added position: relative and overflow-y: auto to the flexbox children- abc and def.
Wrapped the contents of abc and def into an absolutely positioned box:
.flex-inner {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
Added some borders and the tables in the boxes for illustration.
* {
box-sizing: border-box;
}
#xyz {
flex: 1 1 auto;
display: flex;
flex-flow: column;
height: 250px;
border: 1px solid;
}
#abc {
width: 100%;
flex: 1;
border: 1px solid;
position: relative;
overflow-y: auto;
}
#def {
width: 100%;
flex: 1;
border: 1px solid;
position: relative;
overflow-y: auto;
}
.flex-inner {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
table td {
border: 1px solid red;
}
<div id="xyz" class="row">
<div id="abc" class="col-border-bottom container-fluid">
<div class="flex-inner">
<h2>ABC details</h2>
<table id="abc-table">
<tr>
<td colspan="2">Title</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
</table>
</div>
</div>
<div id="def" class="container-fluid">
<div class="flex-inner">
<h2>DEF details</h2>
<table id="def-table">
<tr>
<td colspan="2">Title</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
</table>
</div>
</div>
</div>

Give the child divs 'overflow:scroll', and 'height:[something]'.

adjust columns of a table in HTML

I want to have a table, such that if the width of the page decreases the columns of the table should be displayed one below the other.

You can use CSS display properties to alter the way the table behaves. In order to make the table cells sit one on top of the other, you need to create a media query which will set the table and each cell to be display: block at the break point that best suits your needs.
In the example below the table cells will wrap when the screen width shrinks to 500px.
Example
#media (max-width: 500px) {
table {
display: block;
border: solid 1px #f00;
}
table td {
display: block;
border: solid 1px #f00;
}
}
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Explanation
By default a table tag uses display: table and a table cell uses display: table-cell. By changing these properties we can alter the way the table is displayed.
For more information on display properties see this article:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
For more information on media queries see the following article:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Alright if i understand correctly you want something like this:
http://codepen.io/geoffyuen/pen/FCBEg
This Solution wil make your table responsive so it can do what you are trying to do(at leat i think i know what youre trying to do)
Just some example html code
<h1>RWD List to Table</h1>
<table class="rwd-table">
<tr>
<th>Movie Title</th>
<th>Genre</th>
<th>Year</th>
<th>Gross</th>
</tr>
<tr>
<td data-th="Movie Title">Star Wars</td>
<td data-th="Genre">Adventure, Sci-fi</td>
<td data-th="Year">1977</td>
<td data-th="Gross">$460,935,665</td>
</tr>
<tr>
<td data-th="Movie Title">Howard The Duck</td>
<td data-th="Genre">"Comedy"</td>
<td data-th="Year">1986</td>
<td data-th="Gross">$16,295,774</td>
</tr>
<tr>
<td data-th="Movie Title">American Graffiti</td>
<td data-th="Genre">Comedy, Drama</td>
<td data-th="Year">1973</td>
<td data-th="Gross">$115,000,000</td>
</tr>
</table>
Then we have our CSS
#import "compass/css3";
// More practical CSS...
// using mobile first method (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)
$breakpoint-alpha: 480px; // adjust to your needs
.rwd-table {
margin: 1em 0;
min-width: 300px; // adjust to your needs
tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
th {
display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
}
td {
display: block;
&:first-child {
padding-top: .5em;
}
&:last-child {
padding-bottom: .5em;
}
&:before {
content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
font-weight: bold;
// optional stuff to make it look nicer
width: 6.5em; // magic number :( adjust according to your own content
display: inline-block;
// end options
#media (min-width: $breakpoint-alpha) {
display: none;
}
}
}
th, td {
text-align: left;
#media (min-width: $breakpoint-alpha) {
display: table-cell;
padding: .25em .5em;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
// presentational styling
#import 'http://fonts.googleapis.com/css?family=Montserrat:300,400,700';
body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
}
h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}
.rwd-table {
background: #34495E;
color: #fff;
border-radius: .4em;
overflow: hidden;
tr {
border-color: lighten(#34495E, 10%);
}
th, td {
margin: .5em 1em;
#media (min-width: $breakpoint-alpha) {
padding: 1em !important;
}
}
th, td:before {
color: #dd5;
}
}
Hope this helps you

how to avoid table-layout avoid for certain elements of the table?

So i've been trying to use table-layout fixed so that the content get's it's width by the largest one but i don't want that to happen to all of the data's. Some of them need to have a width by the content itself not by a sibling they have in the same row. Here's the code
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
<th>2012</th>
<th>2011</th>
<th>Var</th>
</tr>
<tr>
<td class="day">M</td>
<td class="date">3</td>
<td>300,500</td>
<td>300,500</td>
<td>0%</td>
</tr>
<tr>
<td class="day">T</td>
<td class="date">4</td>
<td>300,500</td>
<td>300,500</td>
<td>0%</td>
</tr>
</tbody>
And here's the CSS
table {
float: left;
width: 100%;
height: auto;
margin-top: 20px;
table-layout: fixed;
display: table;
}
table tr{
border-bottom: 1px solid #ccc;
width: 100%;
}
table tr th{
text-align: center;
}
table tr td{
display: table-cell;
text-align: center;
}
So the question is that i want the td's with class date and day to have width by their own width like width = auto to avoid the table cell function. What do you guy's suggest i should do. Can i do this in CSS or shall i do a script for that.