To give semantic meaning to your table: <table> <thead> <tr> <th>Person</th> <th>Amount</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>Person1</td> <td>$5.99</td> <td>02/03/09</td> </tr> <tr> <td>Person2</td> <td>$12.99</td> <td>08/15/09</td> </tr> </tbody> </table> According to the specification: Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and … Read more
You can set table-layout: fixed; on your table. Using this you can override the browser’s automatic column resizing. Then column widths will be set based on the widths that you assign to the cells in the first row.
Add the following CSS style after loading Bootstrap: .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { background-color: red; // Choose your own color here }
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
You can combine the selectors using :is() and comma , .tr1 th:is(:nth-child(1),:nth-child(5)), :is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4)), .tr3 td:nth-child(3) {background-color:green} .tr1 th:is(:nth-child(1),:nth-child(5)):hover, :is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4)):hover, .tr3 td:nth-child(3):hover {background-color:hotpink} .tr1 th:is(:nth-child(1),:nth-child(5))::selection, :is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4))::selection, .tr3 td:nth-child(3)::selection {color:hotpink}
TableLayout and GridLayout support column spanning, but GridView does not.
Give width to table, and set margin auto horizontally. table { width:500px; margin: 10px auto; }
You can use array_chunk() to split an array of data into smaller arrays, in this case of length 2, for each row. <table> <?php foreach (array_chunk($values, 2) as $row) { ?> <tr> <?php foreach ($row as $value) { ?> <td><?php echo htmlentities($value); ?></td> <?php } ?> </tr> <?php } ?> </table> Note that if you … Read more
Using Html Agility Pack WebClient webClient = new WebClient(); string page = webClient.DownloadString(“http://www.mufap.com.pk/payout-report.php?tab=01”); HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument(); doc.LoadHtml(page); List<List<string>> table = doc.DocumentNode.SelectSingleNode(“//table[@class=”mydata”]”) .Descendants(“tr”) .Skip(1) .Where(tr=>tr.Elements(“td”).Count()>1) .Select(tr => tr.Elements(“td”).Select(td => td.InnerText.Trim()).ToList()) .ToList();
Datatables does not support this kind of grouping out of the box. But, as in many cases, there is a plugin available. It is called RowsGroup and is located here: Datatables Forums. A live example is also included. If you change the JS part in this example to the below you will have your desired … Read more