The trick is to give padding on the td elements, but make an exception for the first (yes, it’s hacky, but sometimes you have to play by the browser’s rules): First-child is relatively well supported: https://developer.mozilla.org/en-US/docs/CSS/:first-child You can use the same reasoning for the horizontal padding by using tr:first-child td. Alternatively, exclude the first column … Read more
You’re right: This works fine if your row has an id, such as: If you don’t have an id, you can use any of jQuery’s plethora of selectors.
The widths of cells depend on cell contents, HTML and CSS settings for widths, browser, and possibly phase of the moon. The colspan attribute just specifies how many columns (hence, how many slots in the grid for the table) a cell occupies. If you see the last cell of row 2 as the widest, then the reason … Read more
2015 update: the flexbox approach There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don’t provide any examples. The specification for flexbox has definitely settled now. Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation … Read more
I’d like to make some cells of html table editable, simply double click a cell, input some text and the changes can be sent to server. I don’t want to use some toolkits like dojo data grid. Because it provides some other features. Would you provide me some code snippet or advices on how to … Read more
Just collapse the table borders and remove the borders from table cells (td elements). Without explicitly setting border-collapse cross-browser removal of table cell borders is not guaranteed.
This should work (from a few alterations to your code above).
And in css: EDIT: As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl’s border-collapse solution. I actually quite dislike this change so far (don’t work with tables that often). It makes some tasks bit more complicated. E.g. when you want … Read more
Just revisiting an old solution, I thought I’d give it a facelift for it’s ~5 year anniversary! Plain Javascript (ES6) Does alpha and numeric sorting – ascending and descending Works in Chrome, Firefox, Safari (and IE11, see below) Quick explanation add a click event to all header (th) cells… for the current table, find all rows (except the first)… sort the rows, based on … Read more
The approach you suggest is not guaranteed to give you the result you’re looking for – what if you had a tbody for example: You would end up with the following: I would therefore recommend this approach instead: You can include anything within the after() method as long as it’s valid HTML, including multiple rows as per the example … Read more