Yes, CSS2.1 states the following for tables with the separated borders model: However, in HTML and XHTML1, the width of the <table> element is the distance from the left border edge to the right border edge. Note: In CSS3 this peculiar requirement will be defined in terms of UA style sheet rules and the ‘box-sizing’ … Read more
You can use jQuery click instead of using onclick attribute, Try the following: $(‘table’).on(‘click’, ‘input[type=”button”]’, function(e){ $(this).closest(‘tr’).remove() }) Demo
JavaScript with a few modifications: function deleteRow(btn) { var row = btn.parentNode.parentNode; row.parentNode.removeChild(row); } And the HTML with a little difference: <table id=”dsTable”> <tbody> <tr> <td>Relationship Type</td> <td>Date of Birth</td> <td>Gender</td> </tr> <tr> <td>Spouse</td> <td>1980-22-03</td> <td>female</td> <td><input type=”button” value=”Add” onclick=”add()”/></td> <td><input type=”button” value=”Delete” onclick=”deleteRow(this)”/></td> </tr> <tr> <td>Child</td> <td>2008-23-06</td> <td>female</td> <td><input type=”button” value=”Add” onclick=”add()”/></td> <td><input type=”button” … Read more
Depending on your content and space, you can use floats or inline display: <table style=”display: inline-block;”> <table style=”float: left;”> Check it out here: http://jsfiddle.net/SM769/ Documentation CSS display on MDN – https://developer.mozilla.org/en/CSS:display CSS float on MDN – https://developer.mozilla.org/en/CSS/float
Edit 2021: It seems nowadays there’s better options that are more semantic and more screen-reader-friendly. Check out e.g. Jans solution. Original answer: as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach: HTML: <div class=”table”> <a class=”table-row” href=”/mylink”> <div class=”table-cell”>…</div> <div class=”table-cell”>…</div> … Read more
Should work on every modern browser and without jQuery or any dependency, here my implementation : // Quick and simple export target #table_id into a csv function download_table_as_csv(table_id, separator=”,”) { // Select rows from table_id var rows = document.querySelectorAll(‘table#’ + table_id + ‘ tr’); // Construct csv var csv = []; for (var i = … Read more
Try to use this CSS: /* Apply this to your `table` element. */ #page { border-collapse: collapse; } /* And this to your table’s `td` elements. */ #page td { padding: 0; margin: 0; }
Please take a look at the following screen shot: To the left, you see an HTML file rendered in a browser. To the right, you see that HTML file rendered to PDF using iText (the Java version). Note that the functionality of iTextSharp regarding HTML to PDF is identical to Java, hence you shouldn’t post … Read more
If you want recursive way: public static function jsonToDebug($jsonText=””) { $arr = json_decode($jsonText, true); $html = “”; if ($arr && is_array($arr)) { $html .= self::_arrayToHtmlTableRecursive($arr); } return $html; } private static function _arrayToHtmlTableRecursive($arr) { $str = “<table><tbody>”; foreach ($arr as $key => $val) { $str .= “<tr>”; $str .= “<td>$key</td>”; $str .= “<td>”; if (is_array($val)) … Read more
A great client-side tool for exporting html tables to xlsx, xls, csv, or txt is TableExport by clarketm (me). It is a simple, easy-to-implement, full-featured library with a bunch of configurable properties and methods. Install $ npm install tableexport Usage TableExport(document.getElementsByTagName(“table”)); // OR using jQuery $(“table”).tableExport(); Documentation Sample apps to get you started TableExport + … Read more