Border collapse with rounded edges? - javascript

I am trying to render a React table that has no borders but has rounded edges. I tried using border-collapse: collapse, which removed the borders that were appearing between columns in the table, but it also removed the border-radius property I had set. Does anyone have an idea as to how to accomplish this?
Here is how I am styling the table. Note I do not specify borders anywhere, but they are still appearing.
moduleSection {
border-radius: 4px;
background-color: #fff;
}
And here is how I create the table in my JS file:
renderRow = (item) => {
return (
<tr key={item.id}>
<td>
{item.name}
</td>
<td>
<div>
{item.status}
</div>
</td>
</tr>
);
}
render() {
const items = this.props.items;
return (
<table className={styles.moduleSection}>
<thead>
<tr>
<th>
<div>
Your Items
</div>
</th>
<th>
<div>
Item Status
</div>
</th>
</tr>
</thead>
<tbody>{items.map(this.renderRow)}</tbody>
</table>
);
}

Try changing
border-radius = 4px; to border-radius:4px;
and add
border:none;

Here's an example using a wrapper div :
<div style="display: table;
padding: 2px;
border-radius: 5px;
border: 1px solid #999;">
<TABLE style="border-collapse: collapse;">
<THEAD>
<TR style="background-color: red;">
<TH>Weekday</TH>
<TH>Date</TH>
<TH>Manager</TH>
<TH>Qty</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Mon</TD>
<TD>09/11</TD>
<TD>Kelsey</TD>
<TD>639</TD>
</TR>
<TR>
<TD>Tue</TD>
<TD>09/12</TD>
<TD>Lindsey</TD>
<TD>596</TD>
</TR>
<TR>
<TD>Sun</TD>
<TD>09/17</TD>
<TD>Susan</TD>
<TD>272</TD>
</TR>
</TBODY>
</TABLE>
</div>
Note: display:table; is not supported in IE7 and earlier. IE8 requires a: !DOCTYPE in the document. All modern browsers (including IE9) support it though, so it shouldn't be a problem.

Here is a table with the css working. You must be having some conflicting css that overrides these styles. This is exactly as you posted in the question. And it seems to be working. See the fiddle.
Sample HTML:
<table class="moduleSection">
<tr>
<td>
testing
</td>
<td>
table
</td>
</tr>
<tr>
<td>
testing
</td>
<td>
table
</td>
</tr>
</table>
CSS:
.moduleSection {
border-radius: 10px;
background-color: #fff;
}
See this fiddle:
https://jsfiddle.net/8s8jnmw7/
And it even works with border collapse added:
https://jsfiddle.net/8s8jnmw7/1/
I have tested this in chrome, firefox and IE Edge.

Related

Overflow hidden and scroll same time

How can I create two independent containers with fixed headers and scrollable body like this i have manage to create fixed table headers but i couldn't create scrollable body that both can scroll same time at vertically and only one can scroll horizontally.
Left side tree table and gantt chart both can be scroll horizontally, but right side Gantt chart only scrolls vertically.
Please check my code below, i hace acchived almost what i want, but i neet to fix two things
1) Need to fix the Header on table B but without breaking horizontal scroll behavior
2) How can Make both A & B vertical scrolls can happen at syncrounasly at same time, like when someone scrolls Table A table b alsp needto be scroll at the same time in vertically only.
like this link http://www.bryntum.com/playpen/react/ (add some task to activate the scroll)
PLEASE CHECK THIS CODE SNIPPET IN FULL PAGE
th, td{
padding: 10px 20px;
width: 100px;
}
th{
background: #fff;
}
td{
background: #efefef;
}
.fl{
float: left;
}
.panel_body{
height: 200px;
width: 430px;
overflow: hidden;
overflow-y:scroll;
}
.panel_body.scroll_h{
overflow-x: scroll;
width: 300px;
height: 240px;
}
.scroll_h table{
width: 500px;
}
<div class="panel">
<div class="fl panel_left">
<header>
<table>
<thead>
<tr>
<th>Table A</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
</table>
</header>
<section class="panel_body">
<table>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</div>
<di class="fl panel_right">
<section class="panel_body scroll_h">
<table>
<thead>
<tr>
<th>Table B</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</di>
</div>
With css and | or Js.
Define a width and height to the scrollable element.
Then use the overflow property:
#container {
width: 200px;
height: 200px;
overflow: scroll;
}
#container div {
width: 100%;
height: inherit;
}
#a { background: cornflowerblue; }
#b { background: brown; }
<div id="container">
<div id="a"></div>
<div id="b"></div>
</div>
You can set a horizontal/vertical scroll with overflow-x/overflow-y.
see MDN - overflow
PS: but please search for existing questions (and answers), post some code,etc. Here's an example but it will never fit your actual project.

hr within table but full width

I made this block of code
<table>
{item.awards.map((obj,i) =>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
{i !== item.awards.length-1 ? <hr /> : ''}
</tbody>
)}
</table>
It worked, every block has a separator (<hr/>) but the problem now is the hr length is not full width. I can't make the table 100% as it will effect the td.
It's invalid to have an hr as a direct child of tbody. tbody's content model only allows tr elements (and scripts). Even if it seems to work in one browser, there's no guarantee it will in another, or even in the next dot rev of the one where it used to work.
So you need to put the hr in a tr, which means putting it in a td or th:
{i !== item.awards.length-1 ? <tr><td colspan="3"><hr /></td></tr> : null}
You can then style the hr as necessary with CSS to make it as wide as you like. For instance (note the sep class on the separator rows and the CSS it applies to the row and the hr):
table {
border: 1px solid #ddd;
}
.sep hr {
position: absolute;
width: 100%;
margin-top: -0.1em;
}
.sep {
position: relative;
overflow: hidden;
height: 1em;
}
<table>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
<tr class="sep">
<td colspan="3">
<hr />
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
<tr class="sep">
<td colspan="3">
<hr />
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
</tbody>
</table>
(Side note: null is a better choice than '' for the third operand of that conditional operator.)

Alternative row coloring in html table with ng-repeat

I have an table which is filled with values using ng-repeat. I need to color the rows of table alternatively with green and yellow color. I tried it out the following way without ng-repeat and it works.
.table-striped>tbody>tr:nth-of-type(odd)
{
background: yellow !important;
}
.table-striped>tbody>tr:nth-of-type(even)
{
background: green !important;
}
<html>
<div><table class="table table-striped">
<thead style="border: 1px solid">
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{value.val1}}</td>
</tr>
<tr>
<td>{{value.val2}}</td>
</tr>
<tr>
<td>{{value.val3}}</td>
</tr>
</tbody>
</table>
</div>
<html>
But it is not working while using ng-repeat as follows(all rows are in yellow itself). Please help.Thanks in advance.
.table-striped>tbody>tr:nth-of-type(odd)
{
background: yellow !important;
}
.table-striped>tbody>tr:nth-of-type(even)
{
background: green !important;
}
<html>
<div><table class="table table-striped">
<thead style="border: 1px solid">
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody ng-repeat="value in values">
<tr>
<td>{{value.val1}}</td>
</tr>
</tbody>
</table>
</div>
<html>
I think you should give ng-repeat="value in values" to tr not to tbody. You ng-repeat on body will repeat body element.
You can add a class to your rows dynamically and then give the style you want.
<tr class="myrow">
$(".myrow:odd").addClass("odditem");
$(".myrow:even").addClass("evenitem");
You can use the directive ng-class-odd="'classname'".
<html>
<div>
<table class="table table-striped">
<thead style="border: 1px solid">
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody ng-repeat="value in values">
<tr class="row-color" ng-class-odd="'odd'">
<td>{{value.val1}}</td>
</tr>
<tr class="row-color" ng-class-odd="'odd'">
<td>{{value.val2}}</td>
</tr>
<tr class="row-color" ng-class-odd="'odd'">
<td>{{value.val3}}</td>
</tr>
</tbody>
</table>
</div>
<html>
then in your css you could do the following
.row-color {
background: green;
}
.row-color.odd {
background: yellow;
}
This also gets rid of your !important which is usually regarded as bad practice.
While I think the solution for OP would be moving the ng-repeat from <tbody> to <tr>, because it matches his intended structure without ng-repeat; it is entirely possible to color alternatively by using css alone when the ng-repeat is on the <tbody> layer.
tbody:nth-of-type(odd)>tr {
background-color: pink;
}
tbody:nth-of-type(even)>tr {
background-color: purple;
}
<table>
<tbody>
<tr><td>row1</td></tr>
</tbody>
<tbody>
<tr><td>row2</td></tr>
</tbody>
<tbody>
<tr><td>row3</td></tr>
</tbody>
</table>

how to replace values in innerhtml using javascript

I'm dynamically(on click of radio button) copying the inner html of one row(in a table) to other but after removing some elements.
var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
.replace('<div class="custom-radio" style="margin-top:50px;">',"")
.replace('<label for="shareredio"+e""></label>',"")
.replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
.replace('<label for="sharecheck"+e""></label>',"")
.replace('Share fare',"");
document.getElementById('copyDiv').innerHTML = a;
I don't know enough about javascript but if there is any better way then please help...
This is probably not the best way to do it but I thought I'd at least give you an answer quickly. This is using jQuery to manipulate the DOM.
var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();
var result = $a.html().replace('Share fare', "");
$('#copyDiv').html(result);
something like this?
$(document).ready(function() {
$('.copy').on('change', function(){
if($('.copy:checked').val() == 'yes'){
$('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
$('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
$('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
}
else {
$('.table2').find('.rowContents1').html('');
$('.table2').find('.rowContents2').html('');
$('.table2').find('.rowContents3').html('');
}
});
});
table {
border: 1px solid gray;
}
td, th {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
div{
display: inline-block;
margin-right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
Table1
<table class="table1">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1">This is the Contents of Row 1</td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2">This is the Contents of Row 2</td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3">This is the Contents of Row 3</td>
</tr>
</body>
</table>
</div>
<div>
Table2
<table class="table2">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1"></td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2"></td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3"></td>
</tr>
</body>
</table>
</div>
i used .html() to rewrite the contents inside each td. .find() function just traverses down the element tree and finds the descendants $('.table2').find('.rowContents1') is saying in element of class .table2, find the descendants with class .rowContents1.
hope this helps and is what you're looking for

jquery toggle <td> on click of a button

I have a table that has a few items inside, and a button for each that will display more information on the specific item on the menu.
my HTML table is below
<table id="menu_breads">
<thead>
<tr>
<th colspan="2">BREADS</th>
</tr>
<tr>
<th>ITEM</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>Portugese Rolls
<button class="myButton">&#x2C5</button>
</td>
<td>R1.49</td>
</tr>
<tr>
<td colspan="2" class="more">A hand made selection of Portugese rolls</td>
</tr>
<tr>
<td>Hotdog Buns
<button class="myButton">&#x2C5</button>
</td>
<td>R0.99</td>
<tr>
<td colspan="2" class="more">A hand made selection of Hotdog buns</td>
</tr>
</tr>
<tr>
<td>French Loaf
<button class="myButton">&#x2C5</button>
</td>
<td>R3.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of French loaves</td>
</tr>
</tr>
<tr>
<td>Sead Roll
<button class="myButton">&#x2C5</button>
</td>
<td>R2.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of Seed Rolls</td>
</tr>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<h6>Prices may change without prior warning</h6>
</td>
</tr>
</tfoot>
</table>
<!-- TABLE FOR CONFECTIONARIES -->
<table id="menu_confect">
<thead>
<tr>
<th colspan="2">CONFECTIONARIES</th>
</tr>
<tr>
<th>ITEM (per slice)</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cream Slice
<button class="myButton">&#x2C5</button>
</td>
<td>R12.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of Cream slices</td>
</tr>
</tr>
<tr>
<td>Chocolate Cake
<button class="myButton">&#x2C5</button>
</td>
<td>R15.99</td>
<tr>
<td colspan="2" class="more">A hand made selection of Chocolate cakes</td>
</tr>
</tr>
<tr>
<td>Coconut Eclaire
<button class="myButton">&#x2C5</button>
</td>
<td>R2.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of Coconut Eclairs</td>
</tr>
</tr>
<tr>
<td>Chocolate Eclaire
<button class="myButton">&#x2C5</button>
</td>
<td>R4.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of chocolate Eclairs</td>
</tr>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<h6>Prices may change without prior warning</h6>
</td>
</tr>
</tfoot>
</table>
My CSS is here
.myButton {
background: #183C4C;
border-radius: 31%;
border:2px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:11px;
text-decoration:none;
width: 15%;
float: right;
}
.more {
display: none;
}
Demo
and the jquery is what I am having a bit of a problem understanding. Would I need to ID every td that I want to display or can I do it with classes and an on click toggle event?
I have managed to get it to display on click, the problem is that all the hidden rows display and not just the individual one.
$(document).ready(function(){
$('.myButton').click(function(){
$(this).closest('tr').next().find('.more').toggle();
if ($(this).closest('tr').is(":visible")) {
$(this).html("&#x2C4")
}
else {
$(this).html("&#x2C5")
}
});
});
You wouldn't have to give IDs to every td, that'd be overkill. You want something dynamic. Assuming that your HTML structure will stay the same, you can do:
EDIT: Added the ability to toggle plus and minus icons from comments
$(".myButton").on("click", function () {
var more = $(this).closest("tr").next("tr").find(".more");
more.toggle();
if (more.is(":visible")) {
//show minus icon, hide plus
}
else {
//show plus icon, hide minus
}
});
DEMO (thanks Rory)
The more should be given to the tr - also your markup is not valid(you have a tr as child of tr - the more tr is child of the button tr)
<tr>
<td>Portugese Rolls
<button class="myButton">&#x2C5</button>
</td>
<td>R1.49</td>
</tr>
<tr class="more">
<td colspan="2">A hand made selection of Portugese rolls</td>
</tr>
then
$('.myButton').click(function(){
$(this).closest('tr').next().toggle();
})
Demo: Fiddle
If you don't want to change anything
$('.myButton').click(function(){
$(this).closest('tr').next().find('.more').toggle();
})
Demo: Fiddle
Have you tried this:
$(".myButton").on("click",function() {
$(this).closest("tr").toggle();
})

Categories