Table cell width increases with addition of row - html

I have the following table:
<table border="1" class="mmrTable" id="mmrdisplayTable">
<tbody><tr>
<td valign="top" style="width: 160px; font-weight: bold;" id="mmrdisplayTD">Running Projects:</td>
<td id="mmrdisplayTD">This month's running project</td>
</tr>
<tr>
<td valign="top" style="width: 160px; font-weight: bold;" id="mmrdisplayTD">Main Orders:</td>
<td id="mmrdisplayTD">This month's main orders</td>
</tr>
<tr>
<td valign="top" style="width: 160px; font-weight: bold;" id="mmrdisplayTD">Main Opportunities:</td>
<td id="mmrdisplayTD">This month's main opportunities</td>
</tr>
<tr>
<td valign="top" style="width: 160px; font-weight: bold;" id="mmrdisplayTD">Comments/Summary:</td>
<td id="mmrdisplayTD">no comments</td>
</tr>
</tbody></table>
As soon as I add a row above all rows the width of the first column of all the other rows changes from 160 to something else. Can someone tell me why? and help me reduce it to 160?
The code for the row that I add is:
<td colspan="2" class="headDisplay">Month: May|
Year: 2014| Submitted by: ibrahim nadir|
Submission Date: 2014-05-22| Submitting department: IT
</td>
The CSS is:
#mmrdisplayTable {
width: 100%;
}
.headDisplay{
background: none repeat scroll 0 0 #3C68AE;
border: 1px solid #DDDDDD;
color: #FFFFFF;
font-weight: bold;
height: 20px;
padding: 2px 10px;
}
#mmrdisplayTD{
border: 1px solid #ddd;
text-align: left;
padding:5px;
}
Any suggestions and help would be really appreciated!

It's a pretty easy solution.
Just add this to your css.
#mmrdisplayTable {
max-width: 320px;
}
#mmrdisplayTD {
min-width: 160px;
}
so your css looks like this:
#mmrdisplayTable {
width: 100%;
max-width: 320px;
}
headDisplay {
background: none repeat scroll 0 0 #3C68AE;
border: 1px solid #DDDDDD;
color: #FFFFFF;
font-weight: bold;
height: 20px;
padding: 2px 10px;
}
#mmrdisplayTD {
border: 1px solid #ddd;
text-align: left;
padding:5px;
min-width: 160px;
}
max-width in #mmrdisplayTable is just 160px * the amount of td's.
See the Fiddle i made.

Related

how to overlap two columns in css

The below picture represents a timeline. Here the task "Exercise" starts from 8:00 to 8:15 and which has been marked with light-blue background color. The other two tasks - first one is "Travel to work" and second one is "Plan day" - are getting overlapped because the former task ("Travel to work") starts from 8:25 to 8:55 and the later task ("Plan day") starts from 8:30 to 9:00. So the overlapping tasks should show as given in the picture.
I tried to implement this using HTML table and css but I am really stuck to move further and its not working the way it is showing in the picture.
<style>
.line{
/* width: 100%; */
border-top: 1px solid black;
/* position: absolute; */
background-color: #ADD8E6;
width: 45%;
height: 30pt;
}
.halfAnHour{
font-size: 11px;
/* text-align: right; */
}
.title{
font-size: 10px;
}
.starttime{
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.time{
border-top: 1px solid black;
width: 10%;
height: 30pt;
}
</style>
<body>
<table style="width: 100%;">
<tr>
<td class="time" style="width: 10%;height: 30pt;">8:00</td>
<td class="line" style="width: 45%;height: 30pt;">Excercise</td>
<td class="line" style="width: 45%;height: 30pt;"> </td>
</tr>
<tr>
<td class="time" style="height: 30pt;">8:30</td>
<td class="line">Travel to work</td>
<td class="line"> </td>
</tr>
<tr>
<td class="time">9:00</td>
<td class="line">Plan day</td>
<td class="line"> </td>
</tr>
<tr>
<td class="time">9:30</td>
<td class="line">Review yesterday's comments</td>
<td class="line"> </td>
</tr>
</table>
</body>
You could use CSS Flexbox and some manipulation of position to overlap tasks occurring in the same hour. This is a good start to achieving a similar layout to the image you provided.
.line{
/* width: 100%; */
border-top: 1px solid black;
/* position: absolute; */
background-color: #ADD8E6;
width: 100%;
height: 30pt;
}
.title{
font-size: 10px;
}
.time{
border-top: 1px solid black;
width: 49px;
width: auto;
height: 30pt;
color: #555;
}
table tr {
display: flex;
align-items: center;
}
table tr td {
flex: initial;
}
table tr td:not(:first-child) {
border-left: .19rem solid blue;
}
table .overlap {
margin-top: .75rem;
}
table .overlap td {
height: 3rem;
margin-bottom: -7px;
}
table .overlap > .time {
padding-right: .6rem;
}
table .overlap .line:last-child {
position: relative;
left: -.5px;
bottom: -2px;
}
.hour {
font-size: 1.3rem;
}
<body>
<table style="width: 100%;">
<tr>
<td class="time hour">8:00</td>
<td class="line">Excercise</td>
</tr>
<tr class="overlap">
<td class="time half">8:30</td>
<td class="line">Plan day</td>
<td class="line" style="margin-bottom: .5rem">Travel to work</td>
</tr>
<tr>
<td class="time hour">9:00</td>
<td class="line">Review yesterday's comments</td>
</tr>
</table>
</body>

Add new row in table using jquery in reactjs

I'm want to add new row using jquery any one help me to solve my problem"
'''
https://jsfiddle.net/dn6chabs/86/
jsfiddle here want to add new row
'''
So, there were quite a few issues with your code:
If you check console by hitting f12 you have this error Uncaught ReferenceError: $c is not defined because of this line: $("#field7").val($c);
I don't think it's necessary for the add and remove to be <a> tags, unless you want them specifically for styling, as it confuses the matter
$(this).parent().parent().remove(); this line doesn't really appear to do anything
Anyway, here's the corrected code!
$("#field7").val(c);, this has been corrected
The add and remove have been made <span> tags with custom styling to look like <a> tags
The onclick event has been corrected in light of this
The removal process has been fixed and is now $('#table').children().eq($("#table").children().length - 1).not('tfoot').remove();, whereby it never removes the subtotal / total line
$(document).ready(function() {
$("#add_to_table").on('click', function() {
navObj = $("#table tbody:last").clone();
$("#table").append(navObj);
});
$("#remove_from_table").on('click', function() {
$('#table').children().eq($("#table").children().length - 1).not('tfoot').remove();
});
});
$(document).ready(function() {
var a = document.getElementById("field5").innerHTML;
var b = document.getElementById("field6").InnerHTML;
c = a * b;
$("#field7").val(c);
});
.link {
text-decoration: underline;
color: blue;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="add_to_table" class="link">Add</span>
<span id="remove_from_table" class="link">Remove</span>
<table id="table" style="width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; border: 0px;" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr id="row">
<th scope="row" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">#</th>
<th scope="row" class="text-left" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">DESCRIPTION</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">UNITS</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">PRICE</th>
<th scope="row" class="text-right" style="white-space: nowrap; font-weight: 400; color: #fff; font-size: 1.6em; background: #3989c6;">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td id="field1" class="no" style="color: #fff; font-size: 1.6em; background: #3989c6;">01</td>
<td id="field2" class="text-left" style="padding: 15px; background: #eee; border-bottom: 1px solid #fff;">
<h3 id="field3">WebSite <em><strong>Consultansy</strong></em></h3>
<em id="field4">Tasks related to meeting minutes AbC</em>
</td>
<td id="field5" class="qty" style="padding: 15px; background: #eee; border-bottom: 1px solid #fff;">4</td>
<td id="field6" class="unit" style="background: #ddd;">$100.00</td>
<td id="field7" class="total" style="background: #3989c6; color: #fff;">$300.00</td>
<td>
</td>
</tr>
</tbody>
<tfoot style="display: table-footer-group; vertical-align: middle; border-color: inherit;">
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;" colspan="2">SUBTOTAL</td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;">$300.00</td>
</tr>
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;" colspan="2"><em>TAX Deductions</em></td>
<td style="background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa;">00.00</td>
</tr>
<tr>
<td style="border: none;" colspan="2"> </td>
<td style="color: #3989c6; font-size: 1.4em; border-top: 1px solid #3989c6;" colspan="2">GRAND TOTAL</td>
<td style="color: #3989c6; font-size: 1.4em; border-top: 1px solid #3989c6;">$300.00</td>
</tr>
</tfoot>
</table>
Check the fiddle: JSFiddle
Let me know how you get on!

CSS not showing correctly in Chrome & Firefox

I am having issues with certain styles not showing correctly in browsers for tables that I created. Specifically the class I created .rowB background color not showing as well as the right side border that I created for class cellBrdrRght.
#charset "UTF-8";
/* CSS Document */
/* info charts */
td{
vertical-align: middle;
}
.chartHeader{
background-color: #115967!important;
color: #fff;
text-align: center;
font-weight: bold;
}
.rowA{
background-color: #d0d0d0!important;
color: #4b4b4b;
.rowB{
background-color: #666666!important;
color: #fff;
}
.cellBrdrRght {
border-style: solid!important;
border-width: 0px 1px 0px 0px!important;
border-color: white!important;
}
.cellnoBrd {
border-style: none;
}
.tableFooter{
font-size: 10px;
border-style: none;
background-color: #115967!important;
color: #fff;
text-align: left;
colspan: 3;
a:sideBar {
background-color: #115967!important;
padding: 25px 50px 75px 100px;
color: #fff;
}
<link href="http://benefitsatbenefitelect.com/new/wp-content/styles/other-styles.css" rel="stylesheet" type="text/css">
<div style="overflow-x: auto;">
<table>
<tbody>
<tr class="chartHeader">
<td class="cellBrdrRght">Plan Benefits</td>
<td class="cellnoBrd" colspan="2">Current Benefits</td>
</tr>
<tr class="rowA">
<td class="cellBrdrRght">Description</td>
<td class="cellBrdrRght">PPO</td>
<td class="cellnoBrd">HDHP</td>
</tr>
<tr class="rowB">
<td class="cellBrdrRght" style="text-align:left;"><b>Deductible</b> In/Out-of-Network & 2x Family</td>
<td class="cellBrdrRght">$1,250/$2,250**</td>
<td class="cellnoBrd">$3,000/$6,000**</td>
</tr>
<tr class="rowA">
<td class="cellBrdrRght" style="text-align:left;"><b>Coinsurance</b> In/Out-of-Network</td>
<td class="cellBrdrRght">Alaska Plan 20%/20%<br> Non-Alaska Plan 20%/40%</td>
<td class="cellnoBrd">Alaska Plan 20%/20%<br> Non-Alaska Plan 20%/40%</td>
</tr>
<tr class="rowB">
<td class="cellBrdrRght" style="text-align:left;"><b>Out-of-Pocket Maximum</b> In/Out-of-Network & 2x Family</td>
<td class="cellBrdrRght">$5,000/$10,000</td>
<td class="cellnoBrd">$5,000/$10,000</td>
</tr>
<tr class="rowA">
<td class="cellBrdrRght" style="text-align:left;"><b>Primary/Specialist Office</b></td>
<td class="cellBrdrRght">$30 PCP/$40 Specialist</td>
<td class="cellnoBrd">Alaska Plan*: PCP 20%/20% Specialist 20%/20%<br> Non-Alaska Plan*: PCP 20%/40% Specialist 20%/40%</td>
</tr>
<tr class="rowB">
<td class="cellBrdrRght" style="text-align:left;"><b>Retail Prescriptions</b>Generic/Preferred/Non-Preferred</td>
<td class="cellBrdrRght">$20/$45/$60</td>
<td class="cellnoBrd">20%*</td>
</tr>
<tr class="tableFooter">
<td colspan="3">*After Deductible is met **Individuals in Family Tier need only meet individual deductible vs. family deductible</td>
</tr>
</tbody>
</table>
<hr/>
</div>
web page:
http://benefitsatbenefitelect.com/new/index.php/portfolio-item/dark-places/
css file:
http://benefitsatbenefitelect.com/new/wp-content/styles/other-styles.css
#charset "UTF-8";
/* CSS Document */
/* info charts */
td{
vertical-align: middle;
}
.chartHeader{
background-color: #115967 !important;
color: #fff;
text-align: center;
font-weight: bold;
}
.rowA{
background-color: #d0d0d0 !important;
color: #4b4b4b;
}
.rowB{
background-color: #666666 !important;
color: #fff;
}
.cellBrdrRght {
border-style: solid !important;
border-width: 0px 1px 0px 0px !important;
border-color: white !important;
}
.cellnoBrd {
border-style: none;
}
.tableFooter{
font-size: 10px;
border-style: none;
background-color: #115967 !important;
color: #fff;
text-align: left;
colspan: 3;
}
a:sideBar {
background-color: #115967 !important;
padding: 25px 50px 75px 100px;
color: #fff;
}
Change this your .rowA & .tableFooter is not closed properly in {}...
You missed closing tags in .rowA:
.rowA{
background-color: #d0d0d0!important;
color: #4b4b4b;
}
and in .tableFooter:
.tableFooter{
font-size: 10px;
border-style: none;
background-color: #115967!important;
color: #fff;
text-align: left;
colspan: 3;
}
Try this and it should properly work

HTML Email - Can't restrict width

I'm charged with 'rebranding' our IT department communications. I wanted to do our email notifications in pure HTML / CSS to ensure it's portability.
Below is the code, which looks exactly how I want it to in Outlook, however as soon as content is added to the main the words wont wrap correctly and if any content goes further than about 90% of the main content window, the other table components start to stretch!
I've tried all sorts of combinations of 'word-wrap' and 'overflow' at all levels in the table but I can't seem to have it.
My end goal is to have the entire table fixed width, with any long format information expanding down.
<table style="width: 550px; border: 1px solid gray; border-collapse: collapse; font-family: Arial; color: #282828;">
<tr style="border: 1px solid gray;">
<td style="height: 75px; width: 80px; text-align: center; font-size: 60px; font-weight: bold; color: White; background : #007F0E;border-bottom: 1px solid gray;">i</td>
<td style="height: 75px; padding-left: 15px; font-size: 22px;font-weight: bold;border-bottom: 1px solid gray; color: #282828;">Information</td>
<td style="height: 75px; padding-right: 15px; text-align: right; font-weight: bold; border-bottom: 1px solid gray;">
<table>
<tr>
<td><div style="height: 36; text-align: right; font-weight: bold; font-size: 18px; color: #0088CE">company name</div></td>
</tr>
<tr>
<td><div style="height: 36;text-align: right; font-size: 22px;font-weight: bold; color: #282828;">Information Systems</div></td>
</tr>
</table>
</td>
<td style="width: 20px; background : #007F0E;border-bottom: 1px solid gray;"></td>
</tr>
<tr>
<td colspan="99" style="font-family: Arial; height : 300px; padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px; vertical-align: top; text-align: left;">This is the main TD</td>
</tr>
<tr>
<td colspan="99" style="background: #EEEEEE;font-size: 12px; text-align: center; height : 20px; border-Top: 1px solid gray;"><b>IT Helpdesk </b><b style="color: #0088CE"> | </b><b>Ext : </b> XXXX<b style="color: #0088CE"> | </b><b>Email : </b> Link<b style="color: #0088CE"> | </b><b> Portal : </b> Link</td>
</tr>
</table>
Any help is greatly appreciated, this one minor issue is taking me way to long to overcome!
Good:
Bad (this is just random, wordwrapped text):
You have a few errors in your html:
you don't need a nested table for the right header section. Just the <div> portions are enough.
you should set widths for the 'Information' and 'Company name' <td> cells to prevent arbitrary wrapping.
your colspan value should be colspan="4", not colspan="99"
Anyways, to solve your problem you can add style="table-layout: fixed;" to your main table element, to allow yourself to set a more predictable table layout.
https://css-tricks.com/fixing-tables-long-strings/
In the end it was definitely related to the use of COLSPAN.
Instead I replaced the 'heading' piece with a nested table and that resolved the issue.
The specific code I used:
<table border="0" cellpadding="0" cellspacing="0" style="width: 550px; border: 1px solid gray; border-collapse: collapse; font-family: Arial; color: #282828;">
<tr>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;padding: 0px; border-collapse: collapse;">
<tr>
<td style="height: 75px;text-align: center; font-size: 60px; font-weight: bold; color: White; width: 80px; background : #007F0E;border-bottom: 1px solid gray;">i</td>
<td style="height: 75px;width: 200px; padding-left: 15px; font-size: 22px;font-weight: bold;border-bottom: 1px solid gray; color: #282828;">Information</td>
<td style="height: 75px;padding-right: 15px; text-align: right; font-weight: bold; border-bottom: 1px solid gray;">
<table>
<tr>
<td style="text-align: right; font-weight: bold; font-size: 18px; color: #0088CE">company name</td>
</tr>
<tr>
<td style="text-align: right; font-size: 22px;font-weight: bold; color: #282828;">Information Systems</td>
</tr>
</table>
</td>
<td style="width: 20px; background : #007F0E;border-bottom: 1px solid gray;"></td>
</tr>
</table>
</tr>
<tr>
<td style="font-family: Arial; height : 300px; padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px; vertical-align: top; text-align: left;"></td>
</tr>
<tr>
<td style="background: #EEEEEE;font-size: 12px; text-align: center; height : 20px; border-Top: 1px solid gray;"><b>IT Helpdesk </b><b style="color: #0088CE"> | </b><b>Ext : </b> XXXX<b style="color: #0088CE"> | </b><b>Email : </b> Link<b style="color: #0088CE"> | </b><b> Portal : </b> Link</td>
</tr>
</table>
It is certainly painful but unfortunately working with in the constraints of not only Outlook, but also our helpdesk application which doesn't allow direct HTML code. The only way is to directly copy a table in (which is why I've tried to contain it all in a single table!)

How do I get CSS table columns to line up?

I am working with a CSS table, and having an unexpected result - the table columns do not line up properly. This is what the table looks like
Here is the CSS
* {
/* old-style reset here :) */
border: 0px;
padding: 0px;
}
table {
border-collapse: separate;
border: 1px solid #9DABCE;
border-width: 0px 0px 1px 1px;
margin: 10px auto;
font-size: 20px;
width:90%;
}
td, th {
width: 41px;
height: 41px;
text-align: center;
font-size: 18px;
font-weight: bold;
vertical-align: middle;
background: url(../img/cells.png);
color: #444;
position: relative;
}
th {
font-weight: bold;
font-size: 14px;
}
td.today {
background-position: 81px 0px;
color: white;
}
And here is the table HTML
<table cellspacing="0">
<thead>
<th>Core Measure</th><th>National Average</th>
</thead>
<tbody>
<tr>
<td class="today">Discharge Instructions</td>
<td class="today">91%</td>
</tr>
<tr>
<td class="today">Measure LV Systolic Function</td>
<td class="today">98%</td>
</tr>
<tr>
<td class="today">ACE/ARB for LVSD</td>
<td class="today">95%</td>
</tr>
<tr>
<td class="today">Smoking Cessation</td>
<td class="today">99%</td>
</tr>
</tbody>
<tfoot>
<th>Core Measure</th><th>National Average</th>
</tfoot>
</table>
Assistance fixing this problem would be greatly appreciated. Thank you.
It is something to do with your sprite and the background-position values you set. I made a fiddle for you and it seems okay.