Hi, I have a scenario in which i want to make the above view. I am using Bootstrap4 and I know I can achieve this by using either display:flex or display:inline-block. Now I really wanna know which to use when ? What's the best practice ?
Right now i am doing something like this.
.job-details-container {
display: flex;
}
.job-details-container .job-details-type {
width: 15%
}
<div class="job-details-container">
<div class="job-details-type">Id</div>
<div class="job-details-content">0234</div>
</div>
Well, this is essentially a table. So I suggest using HTML tables. The cells will stretch automatically just like with flex. Tables are fully supported back to IE 8.
.job-details {
border-collapse: collapse;
width: 80%;
margin: auto;
}
td, th {
border-bottom: 1px solid #dddddd;
text-align: left;
padding: 10px;
}
<table class="job-details">
<tr>
<td>Id</td>
<td>0234</td>
</tr>
<tr>
<td>Service Type</td>
<td>Move</td>
</tr>
<tr>
<td>Schedule</td>
<td>11:00 am, Jan 1, 2019</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
Change to flex if you want to create layouts and complex designs. For displaying simple text or maybe some images, tables are your friends.
Related
I'm building a table for my website, and I'm trying to place a logo inside of a data cell. The issue is that whenever I add the picture, the margins go really weird and I can't figure out why spacing is added. I tried to remove the padding and margins on the image, and the cell itself, but nothing fixes it.
Before image:
After image:
HTML:
<table class="table">
<thead class="tablehead">
<tr>
<th>Language</th>
<th>Year Initiated</th>
<th>Projects</th>
</tr>
</thead>
<tbody class="tablebody">
<tr>
<td><img src = "images/Java_Logo.png" class="tableimage"></td>
<td>2015</td>
<td>ENTER LINK</td>
</tr>
<tr>
<td>C#</td>
<td>2016</td>
<td>ENTER LINK</td>
</tr>
<tr>
<td>Python</td>
<td>2018</td>
<td>ENTER LINK</td>
</tr>
<tr>
<td>HTML and CSS</td>
<td>2018</td>
<td>ENTER LINK</td>
</tr>
</tbody>
</table>
CSS:
.table{
margin: auto;
}
.tablehead{
font-family: permanent marker;
font-size: 24px;
}
.tablebody{
font-family: body;
font-size: 20px;
}
.tableimage{
width: 15%;
padding:0px;
margin: 0px;
}
th, td{
border-bottom: 1px rgb(146, 40, 40) solid;
padding: 10px;
margin: 0;
}
I've also already tried multiple different images, so this does not seem to be the issue. I'd like all three columns to take up 1/3 of the space each.
Another option is to use this, which changes the behavior of the table overall. (Set your preferred width, or nothing at all):
table {table-layout: fixed; width: 50%;}
You only need to specify a width for the table cells. Try adding this to your CSS:
th, td {
width: 33%;
}
The table must some other css affecting it. When I put your code into JSFiddle, it seems to work the way you want. See example: https://jsfiddle.net/ruben/xg2joc1y/5/
You could try adding some css to your image:
.table img {
display: inline;
}
I'm creating a report card for grades K-6 which prints certain tables based on the student's grade. For example, a 5th grader wouldn't have "Reading Stage" displayed on the report card, but a 1st grader would. I've got the styles formatted correctly to conditionally print the tables, but it's the spacing in between the tables I'm struggling with.
I want there to be a standard amount of space between tables, so I've tried things like adding a blank row as the first row of the table, or adding margin-top=50pt. Everything I've tried results in space added for ALL tables, even the hidden ones, so there is sometimes 200 points of dead space between tables. Not good.
I need a (creative) way to conditionally add space ONLY IF the table is going to be printed.
I'm unsure as to how you're hiding your tables. If you hide them via the HTML5 hidden attribute or display: none, no top margin would interfere with your layout.
If for some reason you can't hide your content in one of these ways, CSS negation could be helpful. In this example, I'm saying that all tables not of a certain class should have margin-top: 1em.
table:not(.skip) {
margin-top: 1em;
}
.skip {
position: relative;
background-color: yellow;
}
.skip::after {
position: absolute;
top: 3px;
left: 150%;
content: ' <-- no margin-top';
white-space: nowrap;
}
<table>
<tr>
<td>table</td>
</tr>
</table>
<table class="skip">
<tr>
<td>table</td>
</tr>
</table>
<table>
<tr>
<td>table</td>
</tr>
</table>
<table class="skip">
<tr>
<td>table</td>
</tr>
</table>
<table>
<tr>
<td>table</td>
</tr>
</table>
I know the above has already answered but were you aware of #media print css? You could add some conditional print css that would only be applied when you are printing.
// only for testing, you can print normally without this. It is just for stackoverflow testing...
$("#testPrint").on("click", function() {
window.print();
});
#media print {
/* styles go here */
.myTables {
background: orange !important;
margin: 100px !important;
border: 1px solid black !important;
width: 500px;
}
}
.myTables {
background: pink;
border-collapse: collapse;
border: 1px dashed black;
padding: 5px;
margin: 5px;
text-align: center;
}
<!-- you dont need this javascript either -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="wrapper">
<table class='myTables'>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
<table class='myTables'>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
<table class='myTables'>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
</div>
<button id="testPrint">TEST PRINT</button>
I am appending a div in a table after table row,Its is not expending 100%,but always stick to first td.
<div style="width:100%;border:1px solid red;height:30px;">Test Div</div>
Note: i can place my div inside td by using colspan,but i have dynamic no of table columns,so i think i can't use colspan
Can you guys have please look at this ?
Logically you can not append DIV in between rows of table. If you want to have a div having 100% of width then use colspan property on TD and then add div in it.
Below is example as per your table structure, you need to have a new row as shown below instead of only DIV :
<tr>
<td colspan=6>
<div style="width:100%;border:1px solid red;height:30px;">Test Div</div>
</td>
</tr>
As pointed out by Nishesh Pratap, the right way to do it is to add dynamic colspan value.
But if you really want to go the CSS way only, you can play with the white-space rule. It will allow your text to overflow above the next TDs.
Keep in mind that this rule will also allow the text to overflow outside the table.
.forbidWrap{
white-space: nowrap;
border: 1px solid blue;
display: inline-block;
}
table{
table-layout: fixed;
width: 600px;
border-collapse: collapse;
text-align: left;
position: relative;
}
th{
background-color: #666;
color: white;
}
td{
border-bottom: 1px solid #ccc;
}
<table>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
<tr>
<td>
<div class="forbidWrap">
The content of this div will overflow on other columns
</div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7282</td>
<td>782</td>
<td>785</td>
<td>1589</td>
</tr>
</table>
The fiddle for my code is here:
http://jsfiddle.net/wasingej/k2GPw/
I think the problem has something to do with how I specify right/left aligned divs but I'm not sure:
div.right
{
float:right;
margin-right: 2%;
border-style:solid;
}
As you can see, the fiddle produces a jumbled mess of garbage. My goal was to have the page look similar to this:
https://i.imgur.com/DVyk7s6.png
I'm fairly new to css so I'm guessing that my problem is caused by something fairly obvious. Any ideas?
Okay here's a very simple example of doing this with a table. This data appears to be tabular in nature, so while there are wonks who insist a table is NEVER okay, using a table for tabular data is appropriate.
HTML:
<table>
<thead>
<tr>
<th colspan=2>List 1 Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Owner 1 Name:</td>
<td>Owner 1 Status</td>
</tr>
<tr>
<td>Owner 2 Name:</td>
<td>Owner 2 Status</td>
</tr>
<tr>
<td>Owner 3 Name:</td>
<td>Owner 3 Status</td>
</tr>
</tbody>
</table>
CSS:
table {
border: 1px solid;
width: 50%;
padding: 2%;
border-radius: 6px;
}
td {
border: 1px solid;
padding: 1% 2%;
}
td:first-child {
text-align: right;
}
thead th {
text-align: center;
}
The fiddle: http://jsfiddle.net/BUp82/
Your issues are stemming from two things... proper handling of floats and overflows
This forked fiddle should show you your expected results: JSFIDDLE
The main bit of css that you need to add is this:
div.outer
{
//... your existing css ...
overflow: hidden;
}
I also added a 100% wide DIV around the title areas like this:
div.title { width: 100%; overflow: hidden; text-align: center; }
*my fiddle has min-height and min-width set for demonstration purposes
I'm attempting to create an HTML table that displays a list of vehicles down the page along with columns for each hour of the day. Within each hourly column I would like to display five bars of varying colors that indicate activity over 12 minute periods. This is an abbreviated version of my latest attempt showing the first two hours:
<table>
<thead>
<tr>
<th class="mobile_column" colspan="1">Mobile Name</th>
<th class="time_column" colspan="5">00</th>
<th class="time_column" colspan="5">01</th>
</tr>
</thead>
<tr>
<td class="mobile_column">Test</td>
<td class="no_data"> </td>
<td class="ignition_off"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
<td class="moving"> </td>
<td class="moving"> </td>
<td class="moving"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
</tr>
</table>
I'm using the following CSS to format each bar:
.no_data, .no_data_legend {
background-color: White;
}
.moving, .moving_legend {
background-color: Green;
}
.idling, .idling_legend {
background-color: Yellow;
}
.ignition_off, .ignition_off_legend {
background-color: Red;
}
.ignition_toggle, .ignition_toggle_legend {
background-color: Purple;
}
.no_data, .moving, .idling, .ignition_off, .ignition_toggle {
width: 5px;
height: 24px;
float: left;
display: inline-block;
padding: 0px 0px 0px 0px;
}
I'm fairly inexperienced in HTML layout but from my reading I was expecting that five of the bars should appear under each of the hourly headings and go across the page, however they all appear under the first hour and then wrap down the page.
I've posted a JSFiddle at http://jsfiddle.net/dKb6Z/2/ that contains the data for 24 hours that makes it more apparent. Any assistance including preferred alternative ways to format the data would be appreciated.
Remove
float: left;
display: inline-block;
from your CSS. It is destroying the standard table layout.
Working jsFiddle here.
Further to #winterblood's answer (sorry, unable to comment), if you are wanting to remove the padding from the cells (which I am assuming you were trying to do with the float + inline-block), you can add the following:
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
Fiddle
See this demo mate, I also added a dotted border so that you can see the 5 cells clearly, aligned under each hour. Also changed white color to grey as it's invisible on JS Fiddle default background.
Remember to include this table {border-collapse:collapse;}
Demo here: http://jsfiddle.net/Godinall/Tc2cx/1/