We Keep Coding

Border collapse with rounded edges?

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.

How to make single row Non scrollable in HTML

I want to create a table scrollable but i need to freeze first row of the table from scrolling. how could i achieve this. Expecting any ideas from CSS or JS or Jquery

Your requirement is a very common use case, and quite sadly there is no native way of achieving it in any browser. You have plenty workarounds using CSS, JS, combinations, each solution having specific advantages and inconvenients (the main most common one being the need to fix the columns widths).
You can of course implement it yourself (browse on the web, you should have plenty tutorials for this). Or you can rely on a library that avoids common pitfalls and is most cross-browsers.
You would probably be interested in DataTables plugin for jQuery, and especially its FixedHeader extension.

example.
HTML
<table class="scroll">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td>4</td>
<td> 5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td> 5</td>
</tr>
</tbody>
</table>
css
table.scroll {
/* width: 100%; */ /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead { display: block; }
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody { border-top: 2px solid black; }
tbody td, thead th {
/* width: 20%; */ /* Optional */
border-right: 1px solid black;
/* white-space: nowrap; */
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
JS
// Change the selector if needed
var $table = $('table.scroll'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Adjust the width of thead cells when window resizes
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
}).resize(); // Trigger resize handler

Using Angular you could use the FixedHeader module like this found on ngmodules http://ngmodules.org/modules/FixedHeader . Or using jquery Plug in http://markmalek.github.io/Fixed-Header-Table/
Also check out using css position: sticky http://charliepark.org/css-only-sticky-headers/

This is called Table Fixed Header Scrolling. You can use this jquery plugin it's very simple to be implemented
fixedheadertable plugin

Use plugin fixedheadertable, Datatable
Refer link Stack over Flow

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

prevent span in td contenteditable

I use contenteditable in td
<table style="width:200px">
<tr>
<td contenteditable style="width:100px" id="1">test</td>
<td contenteditable style="width:100px" id="2">test</td>
</tr>
</table>
when I enter more text in the first td, it make the second td become smaller, then table will bigger than 200px that I specified before, how can I prevent that ?

http://jsfiddle.net/8ZNj3/1/
html:
<table>
<tr>
<td contenteditable>this long text won't overflow</td>
<td contenteditable>test</td>
</tr>
</table>
css:
table {
width: 200px;
table-layout: fixed;
}
td {
width: 100px;
white-space: nowrap;
overflow: hidden;
}

Try this:
<table style="max-width:200px;">
<tr>
<td contenteditable="true" style="max-width:100px; word-wrap: break-word;" id="1">test</td>
<td contenteditable="true" style="width:100px;" id="2">test</td>
</tr>
</table>

How to get the width of the td dynamically

How can I get the td width and make it dynamically change once you added a long text to them... Because I'm planning to have a table-body scrollable.. and I don't want to use the clone() is there way to make it happen?..
Here's the markup:
<div class="table-cont">
<div class="table-header">
<table>
<caption>
</caption>
<tbody>
<tr>
<td>Width 1</td>
<td>Width 2</td>
<td>Width 3</td>
<td>Width 4</td>
<td>Width 5</td>
<td>Width 6</td>
</tr>
</tbody>
</table>
</div>
<div class="table-body">
<table>
<tbody>
<tr>
<td>Width 1</td>
<td>Width 2</td>
<td>Width 3</td>
<td>Width 4</td>
<td>Width 5</td>
<td>Width 6</td>
</tr>
</tbody>
</table>
</div>
script:
var tableHeader = $('.table-header').children('table').outerWidth(true);
var tableWidth = $('.table-header table tr td').width();
alert(tableWidth);
$('table-body tr td').append(tableWidth);
css:
.table-header,
.table-body{
border: 1px solid #d3d3d3;
display: inline-block;
}
table {
border-collapse: 0;
border-spacing: 0;
border: 0;
}
table thead th,
table tbody tr td{
border-right: 1px solid #d3d3d3;
padding: 5px 8px;
font-weight: normal;
table-layout: fixed;
}
table thead th:last-child,table tbody tr td:last-child{
border-right: 0;
}

If you want to set the width use:
$('table-body tr td').width(tableWidth);

Try this,
var tableHeader = $('.table-header').children('table').outerWidth(true);
var tableWidth = $('.table-header table tr td').width();
alert(tableWidth);
$('.table-body table tr td').each(function(){
$(this).append(' '+tableWidth);
});
Fiddle
Updated for making the th with the same width as of td.
$('.table-body table tr th').each(function(){
$(this).append(' '+tableWidth);
});