how can I make the cell auto-adjust width from the content ?

Hi, I am making a table. But it does not look good. As you can see in the following link, the second row does not adjust according to the text length.
http://myiyagi.com/program-of-study-table/

How can I make the cell width auto-adjust according to the text length?
Thank you.

  • Predrag Dubajic

    Hey @totoromaum,

    Hope you're doing well today :slight_smile:

    Tables are always tricky to setup for different screen sizes, cell size can't be smaller than the larger word within it.

    The current issue I see on your linked page is because of CSS_Table_Example that has fixed width to 600px and the table can't expand because of that so you would need to remove this in order to increase the size and allow cells to expand.

    Hope this helps :slight_smile:

    Best regards,
    Predrag

  • Jeonghun

    Thank you for the answer, @dubajicp1. But I cannot find any css that fixed width to 600px in my css.

    body {
    background-color: #efefe9;
    color: #484747;
    font-family: 'Droid Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.625;
    }

    .CSS_Table_Example {
    margin:0px;padding:0px;
    .content-loader tr td {
    white-space: nowrap;width: auto;
    }
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #000000;
    -moz-border-radius-bottomleft:9px;
    -webkit-border-bottom-left-radius:9px;
    border-bottom-left-radius:9px;
    -moz-border-radius-bottomright:9px;
    -webkit-border-bottom-right-radius:9px;
    border-bottom-right-radius:9px;
    -moz-border-radius-topright:9px;
    -webkit-border-top-right-radius:9px;
    border-top-right-radius:9px;
    -moz-border-radius-topleft:9px;
    -webkit-border-top-left-radius:9px;
    border-top-left-radius:9px;
    }.CSS_Table_Example table{
    .content-loader tr td {
    white-space: nowrap;width: auto;
    }
    height:100%;
    margin:0px;padding:0px;
    }.CSS_Table_Example tr:last-child td:last-child {
    -moz-border-radius-bottomright:9px;
    -webkit-border-bottom-right-radius:9px;
    border-bottom-right-radius:9px;
    }.CSS_Table_Example table tr:first-child td:first-child {
    -moz-border-radius-topleft:9px;
    -webkit-border-top-left-radius:9px;
    border-top-left-radius:9px;
    }.CSS_Table_Example table tr:first-child td:last-child {
    -moz-border-radius-topright:9px;
    -webkit-border-top-right-radius:9px;
    border-top-right-radius:9px;
    }.CSS_Table_Example tr:last-child td:first-child{
    -moz-border-radius-bottomleft:9px;
    -webkit-border-bottom-left-radius:9px;
    border-bottom-left-radius:9px;
    }.CSS_Table_Example tr:hover td{
    background-color:#82c0ff;
    background:-o-linear-gradient(bottom, #82c0ff 5%, #56aaff 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #82c0ff), color-stop(1, #56aaff) );
    background:-moz-linear-gradient( center top, #82c0ff 5%, #56aaff 100% );
    filter:progid:smiley:XImageTransform.Microsoft.gradient(startColorstr="#82c0ff", endColorstr="#56aaff"); background: -o-linear-gradient(top,#82c0ff,56aaff);
    }.CSS_Table_Example tr:first-child td{
    background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff) );
    background:-moz-linear-gradient( center top, #0069d3 5%, #007fff 100% );
    filter:progid:smiley:XImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff"); background: -o-linear-gradient(top,#0069d3,007fff);
    background-color:#0069d3;
    border:0px solid #000000;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:18px;
    font-family:Comic Sans MS;
    font-weight:bold;
    color:#ffffff;
    }.CSSTableGenerator tr:first-child:hover td{
    background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff) );
    background:-moz-linear-gradient( center top, #0069d3 5%, #007fff 100% );
    filter:progid:smiley:XImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff"); background: -o-linear-gradient(top,#0069d3,007fff);
    background-color:#0069d3;
    }.CSS_Table_Example tr:first-child td:first-child{
    border-width:0px 0px 1px 0px;
    }.CSS_Table_Example tr:first-child td:last-child{
    border-width:0px 0px 1px 1px;
    }.CSS_Table_Example td{
    background:-o-linear-gradient(bottom, #56aaff 5%, #82c0ff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #56aaff), color-stop(1, #82c0ff) );
    background:-moz-linear-gradient( center top, #56aaff 5%, #82c0ff 100% );
    filter:progid:smiley:XImageTransform.Microsoft.gradient(startColorstr="#56aaff", endColorstr="#82c0ff"); background: -o-linear-gradient(top,#56aaff,82c0ff);
    background-color:#56aaff;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-size:12px;
    font-family:Comic Sans MS;
    font-weight:bold;
    color:#000000;
    }.CSS_Table_Example tr:last-child td{
    border-width:0px 1px 0px 0px;
    }.CSS_Table_Example tr td:last-child{
    border-width:0px 0px 1px 0px;
    }.CSS_Table_Example tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
    }

    Could you help me modify it?

    Jeonghun

  • Jeonghun

    Thank you for the reply, @dubajicp1.
    I got the code from this site, http://www.csstablegenerator.com/

    After I downloaded the code (CSS and HTML) from their site, I put CSS into my wordpress site through the Custom CSS plugin, I also put HTML code into the following site. http://myiyagi.com/program-of-study-table/

    I am stuck here. The table looks good with the provided CSS, but I cannot control the width.
    Could help me with this?

  • Adam Czajczyk

    Hello Jeonghun!

    The table width and table cell width is set inside table HTML code directly as a "width" attribute of HTML tags

    <table> and <td>

    I checked the code generated by default by the CSS Table Generator page and it doesn't include "fixed" width. There's however many "ready to use" table designs on that page and I suppose some of them may use fixed width. That said, you mentioned that you have added their HTML to the site. I assume you did this via WP page editor, is that right?

    What you'll want to do now would be to edit that page again (in editor's "Text" mode) and review it against this codes:

    <table cellpadding="0" cellspacing="0" width="880">

    and

    <td width="110">

    From all such lines you will need to remove the

    width="880"

    part and the

    width="110"

    part. Please do not remove entire lines but only these parts of them. Once this is done an the page is saved, you should then be able to adjust table's widths via CSS.

    I hope that helps!
    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.