Tag: cell
Nabin Nepal (Starx) cell css javascript scroll table
March 14, 2012

HTML tables: horizontal scroll in a td only when needed

Question by user523129

user523129user523129

I have a table with the following: 

<table  cellpadding="2" cellspacing="0" > 
<tr>
<td>Contact: </td>
<td width="100px"><div style="overflow-x:scroll; width:100px">ee@yahoo.com</div>
</td>
</tr>
</table>

This code shows an horizontal scroll in the email cell.

When the email is a short one like ee@yahoo.com the scroll shows but it is not enabled as it is not needed, and when the email is longer let’s say

eeeeeeeeeeeeeeeeeeeeeeeeeee@yahoo.com

the scroll enables so you can see the entire email.

This is good, but what I need is the scroll not to show at all when the email is a short one.

How can I do that??

I’ve tried: 

overflow-x:auto;

And it does not show the scroll when a short email but when the email is a long one it just cut it no scroll at all. I think this happens because there are no spaces in the email.

Thanks a lot!

Answer by Starx

StarxStarx

By defining overflow-x: scroll you are indicating for a scroll bar to appear no matter what.

You should use overflow-x:auto. Here is a working demo

Nabin Nepal (Starx) cell jquery table
March 23, 2011

(jQuery) How to delete all cell from this table?

Question by l2aelba

l2aelbal2aelba
<table class="Table">
    <thead class="thead">
        <tr class="tr">
            <th class="th header">Done</th>
            <th class="th header">None</th>
            <th class="th header">None</th>
            <th class="th header">Done</th>
            <th class="th header">None</th>

            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
        </tr>
    </thead>
</table>

I want to delete all “None”s cell and all “info” of cells

http://jsfiddle.net/D6e4H/

Any idea ? Thanks

Answer by Furqan

FurqanFurqan

use this 

    $(".th:contains('None')") .remove();
    $("td:contains('info')") .remove();

Your jsFiddle has been updated.

Answer by Starx

StarxStarx

I think you are looking for this

$("th:contains('None')").each(function(index,value) {
    //Grab all the "None" th and their indexes
    $("tr td:nth-child("+$(this).index()+")").remove();
    //remove the td with the same indexes on the next tr
    $(this).remove();
    // now also remove the "None" th
});

Here is your Solution

...

Please fill the form - I will response as fast as I can!