In my project I have a lot of tabular data tables. I was wondering is it ok to change default table properties to css grid ?
I want to make table more responsive with css grid
`
<html>
<body>
<table style="display:grid">
<thead style="display:grid">
<tr style="display:grid">
<td></td>
</tr>
</thead>
</table>
</body>
</html>
`
It looks like it should work. I myself have never done it, but the following is a good link to look over some of the basics if you haven't already: https://www.w3schools.com/css/css_grid.asp. It never can hurt to try.
Related
I'm trying to combine an anchor-offset with an anchor-target-style on a table-row.
Having the anchor-ID applied to the table row and styling it via 'tr:target td' does achieve the desired look, while the solutions provided here ( offsetting an html anchor to adjust for fixed header ) achieve the desired offset, but only for text.
I can't use the top-voted solution as it requires the "display: block"-attribute which is incompatible to the tr-tag as far as I know. If somehow possible I would prefer a only css/html solution
The structure I use:
<table>
<tr id="anchor-target1"> <td> Something </td> </tr>
<tr id="anchor-target2"> <td> Something </td> </tr>
</table>
Update: JSFiddle-Example. Goal is to combine both functions: https://jsfiddle.net/7rknaqwu/5/
Is there a way to specify column width here?
Hi, I'm trying to style a table, but I don't know how to specify column width. I've read that the way to do it is by using CSS: <td style="width:130px">
I'm using xampp and I only use a PHP file.
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>$item</td>
<td><img src='item_image_folder/img'></td>
</tr>
</table>
</body>
</html>
what the table looks like
Category 1
item_name image
item_name image
Category 2
item image
item image
Category 3
long_item_name image
<style>
td {
width:130px;
}
</style>
this is using css styling, specifying the width for the <td>'s
You can use like this.
<table>
<tr>
<th width="200"></th>
<th width="100"></th>
<th width="100"></th>
</tr>
</table>
You can put width attribute with pixel / % format.
(example: width="50")
(example: width="50%")
Reference : https://www.w3schools.com/tags/att_table_width.asp
The problem was in styling each <td>'s width within an echo statement. The solution was to simply use single quotes instead of double quotes
<td width='130px'>$item</td> this one was correct inside of echo"";
<td width="130px">$item</td>
I could also use <td id='cell1'>$item</td> and and style with:
<style>
td#cell1{width:130px;}
</style>
Yes, all you'd need to do is select the cell(s) you want to widen, then set this attribute in your <td> tag: width="40px" (example only - change it however you like). You can also change height in the same way, with the height="20px" attribute.
The html table coding structure looks something like the code shown below
<table>
<tr>
<td>Text</td>
<td>input text field</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>submit butto</td>
</tr>
</table>
How to create such table structure in flex which has above given row and column format in flex application with the option of colspann and rowspan alternate too?
There are a lot of ways. I would probably start by looking into the Form layout container. That is great for a two column layout, although it gives you little control over the first column which is primarily used for
You could also, in theory, create something like this by using embedded containers, but I do not think I would recommend that approach because I suspect you'll end up with a lot of unnecessary containers.
You could also write your own layout class. More info on layouts here. This is the most powerful/flexible approach, but probably also the most time consuming.
I have the table bellow on a JSP page. The number of rows on the table is variable, populated by a list passed from the controller. How can I add scrolling to it so the table header is fixed? I know it's easy enough on JSF, but how to do it on JSP?
<body>
<table>
<thead>
<tr>
<th>PO</th>
<th>Product</th>
<th>Batch Size</th>
<th>SPI</th>
<th>AOI</th>
<th>PTH</th>
<th>Inspection</th>
<th>Tests</th>
<th>Expedition</th>
</tr>
</thead>
<tbody id="prodReportTable">
<c:forEach var="pojo" items="${list}">
<tr>
<td>${pojo.po}</td>
<td>${pojo.productName}</td>
<td>${pojo.poSize}</td>
<td>${pojo.spi}</td>
<td>${pojo.aoi}</td>
<td>${pojo.pth}</td>
<td>${pojo.inspection}</td>
<td>${pojo.tests}</td>
<td>${pojo.expedition}</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
If you don't care about cross-browser compatibility you can use this style on the TBODY:
#prodReportTable
{
overflow-y:scroll;
height:200px;
position:absolute;
}
Also, you can get rid of the awful row spacing in IE with: (no scroll bar unfortunately though)
#prodReportTable TR
{
height:1em;
}
Have you check out JQuery Tablesorter?
Take a look at jqgrid (http://www.trirand.com/blog/), which is a jquery table grid plugin. I have used it successfully and it saves a ton of time. It has sorting, filtering, formatting, paging, and other options.
If you want a somewhat 'lower tech' solution, just make a header div and a body div that is x-scrollable. If that doesn't make sense just let me know and I can send a sample...
Good Luck!
Really annoying situation, and maybe there is an easier solution.. but I basically have a simple table I have styled in the general format:
<style type="text/css">
table.master_table {
... global table styling
}
.master_table td {
... master table td styling
}
.master_table td.dv {
... td dv style
}
.. more styling
</style>
<table class="master_table">
<tbody>
<tr>
<td class="dv">
.. nothing special
</tr>
</tbody>
</table>
Now the problem is the server doesn't support the "style" element so I need to manually apply the style to each level i.e.:
<table style="... global table styling">
<tbody>
<tr>
<td style="td styling;td dv style">
.. nothing special
</tr>
</tbody>
</table>
Is there any programs that can do this? Or is there any easier way to do this? I basically have a Wordpress.com blog that looks beautiful, in Live Writer because of some custom styling but as soon as I post, it strips out the style block. As a test I went through an manually did some of the above and it works, its just insanely painful and error prone.
if you are on wordpress.com i do not think you can control the css or anyother file.
you have to host your own wordpress.org blog to customize your theme.
So I found an online solution called "emogrifier"
Works well, all you have to do is enter css, then enter html and it will output inline styles.
There is a plugin called Art Direction which lets you add custom css on a per post basis. If you use this style on several different pages you should add the styles to a global stylesheet.