I am trying to build a website using fullpage.js as a baseline. I cannot figure out why my tables are not formatting properly inside each section, i.e setting border colours will not work. Any help is appreciated :)
(New coder that wants to learn everything)
.tour-table {
width: 50px;
border: 1px solid black;
}
.tour-table tr {
margin: auto;
padding: 40px;
}
<table class="tour-table">
<tr>
<td> Test1 </td>
<td> Test2 </td>
</tr>
</table>
Related
I'm working on creating a printable report(HTML table) that works on internet explorer.
The page should be (1)printable and should (2)work on internet explorer.
The page contains a table that should be (3)collapsed.
I'm trying to create a table similar to the following image
But what I'm getting is a table like the following image
The difference between two images is the unwanted horizontal borders in the second image.
This is the code I'm working on
/**************************************
Section 1
***************************************/
.buyback-table {
border-spacing: 8px 6.5px;
width: 100%;
margin-bottom: 39px;
}
.buyback-table th, .buyback-table td {
text-align: left;
padding: 7px 7px 7px 9px;
font-size: 13px;
border: solid 2px #000000;
}
.buyback-table.buyback-collapse {
border-collapse: collapse;
}
.borderless-space {
border: none !important;
}
.text-center {
text-align: center !important;
}
/**************************************
Section 2
***************************************/
/*.hide-vertical {
position: relative;
}
.hide-vertical:after, .hide-vertical:before {
content: ' ';
position: absolute;
width: 100%;
height: 4px;
left: 0px;
right: 0px;
background-color: white;
}
.hide-vertical:before {
bottom: -2px;
}
.hide-vertical:after {
top: -2px;
}*/
<div class="buyback-collapse-container">
<table class="buyback-table buyback-collapse">
<tbody>
<tr>
<th>Cost/Mile</th>
<td style="width: 5%" class="borderless-space"></td>
<th>Miles</th>
</tr>
<tr>
<td>$0.00</td>
<td class="borderless-space text-center" style="width: 5%">X</td>
<td>0 miles</td>
</tr>
<tr>
<td>$34,704.00</td>
<td class="borderless-space text-center" style="width: 5%">X</td>
<td>3,574 miles</td>
</tr>
<tr>
<td>$0.00</td>
<td class="borderless-space text-center hide-vertical" style="width: 5%">X</td>
<td>0 miles</td>
</tr>
<tr>
<td class="borderless-space" colspan="3">
Other Data:
</td>
</tr>
<tr>
<td colspan="1">Owner Contribution</td>
<td class="borderless-space hide-vertical"></td>
<td>$4,297.83</td>
</tr>
</tbody>
</table>
</div>
In the above code, CSS has two sections. Section 1 has the basic css for the table which results in the first image, and section 2 contains the css for fixing the issue to generate the second image.
If you uncomment code in section 2, a possible solution is applied to the code.
The problem with my solution in the snippet above is that using before and after is not good for printable reports; When I export the report to a PDF file, the position of before and after blocks changes, and instead of hiding the unwanted horizontal borders, it moves view pixels in different directions.
I don't want a solution by implementing a table with collapsed borders, because the table cells should be close to each other. I've already tried that and it makes table cells disjoint.
I'm working on Internet Explorer, and advanced css grid layout didn't work with me.
Is there another way I can implement to hide the unwanted horizontal borders shown in the second image above?
I am trying to insert code blocks into my blogspot.
Here is the custom CSS i added in the blogger.com for my blog under Advanced - Add CSS section
#scripttable {
border-collapse: collapse;
border-spacing: 0;
width: 100%
border: 1px solid #ddd;
}
#scripthead {
text-align: left;
padding: 8px;
background-color: #FFFFFF;
color: black;
}
#scriptdata {
text-align: left;
padding: 8px;
background-color: #00003F;
color: white;
}
In the html i am using as below
<table id="scripttable">
<tr><th id="scripthead">Heading</th></tr>
<tr>
<td id="scriptdata">
<pre>
This is my code block to be displayed
</pre>
</td>
</tr>
</table>
Now i am able to get code snippet highlighted correctly when viewed on desktop but on mobile devices the table is overflowing the width of blog post.
Here is my blog which when viewed on mobile is not correct. Kindly help me know how i can fix this so that the table adjusts automatically on mobile device
https://novicejava1.blogspot.com/2020/06/how-to-build-and-deploy-python-kivy.html
I was able to fix the issue of table width by updating the html content by wrapping my table in div container with style="overflow-x: auto;".
<div style="overflow-x: auto;">
<table id="scripttable">
<tr><th id="scripthead">Heading</th></tr>
<tr>
<td id="scriptdata">
<pre>
This is my code block to be displayed
</pre>
</td>
</tr>
</table>
</div>
Now the rendering is happening properly on mobile device after this change.
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.
I have done plenty of searching both on stackoverflow and other sites and haven't found a single solution that has worked for me yet. I have attached a screenshot of the webpage to see the problem more clearly. If anyone has any tips or tricks that have not already been tried in my code then please let me know! I have tried all the ideas from former VERY similar posts but for some reason none of them are working for me. Thanks in advance.
HTML:
<table>
<tr>
<td><img border="0" alt="java" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
<td><img border="0" alt="python" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
<td><img border="0" alt="htmlcss" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
</tr>
<tr>
<td>text box describing level for java</td>
<td>text box describing level for python</td>
<td>text box describing level for html/css</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
border-spacing: 0px;
}
td {
border: none;
margin: 0;
padding: 0;
line-height: 0;
display: block;
font-size: 0;
img {
vertical-align: top;
border: none;
margin: 0;
padding: 0;
font-size:0;
display: block;
}
You have defined the with of your .png images to be 568.5 pixels, which means the table width will be about 1704 px wide, which is probably wider than the width of your page template.
You want the images to scale to fit the width of the table cells.
you can do this setting a width to the td (33%) and then letting the images scale to a width of 100%.
Note: I built a flexible/responsive layout, which I think might be what you need.
table {
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
border: 1px solid blue;
}
td {
border: none;
padding: 0;
width: 33%;
}
img {
display: block;
width: 100%;
}
tr.labels td {
background-color: beige; /* for demo only */
text-align: center;
padding: 20px 0;
}
tr.images td {
padding: 5px; /* for demo if so needed */
}
<table>
<tr class="images">
<td>
<img border="0" alt="java" src="http://placehold.it/568x296">
</td>
<td>
<img border="0" alt="python" src="http://placehold.it/568x296">
</td>
<td>
<img border="0" alt="htmlcss" src="http://placehold.it/568x296">
</td>
</tr>
<tr class="labels">
<td>text box describing level for java</td>
<td>text box describing level for python</td>
<td>text box describing level for html/css</td>
</tr>
</table>
The padding is already set to 0 in your CSS and table cells are unaffected by margins, so this is not the issue. Table cells expand to the size of their content. Your images are each 568.5px x 296.5px. To get rid of this extra space, decrease the size of your images in the markup, or crop them in your image editor of choice.
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/