Styling html tables

[ericTheGoldfish]

Hi all

We are having a real issues trying to style up simple tables. When we try to set the widths of the columns width="300" (althought this is not valid HTML5) style="width: 300px;" or add a class to a style sheet with a width in it nothing seems to affect the widths of the columns

Is there a reference to how this should be done or is there something stupid and simple that we should be doing that we have missed out?? We haven't come across this issue before with HTML5

Many thanks

Eric

[Ivan K. Ivanov]

Hello Eric,

For setting a column width you can use the colgroup/col tags. Please, take a look at the following code sample:

<table>
  <colgroup>
    <col width="300"/>
    <col width="150"/>
  </colgroup>

  <tr>
    <td>
      cell11
    </td>
    <td>
      cell12
    </td>
  </tr>
</table>

 
Kind regards,
Ivan K. Ivanov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[ericTheGoldfish]

Thanks Ivan

We have given it a go but it has not changed the width of the columns and the table still shows with all the cell contents on a single line. Here is the code we are using:

<div id="resultsView" data-role="view" data-layout="mobile-view" data-title="Your Results">
            <div data-role="scrollview" data-page="0">
                <div data-role="page" class="data">
                    <div style="width: 320px;">
                        <table style="border-collapse: collapse; width: 300px;">
                            <colgroup>
                                <col width="200" />
                                <col width="100" />
                            </colgroup>
                            <tr>
                                <td class="header">Blanket Combo Therapy vs Blanket Cloxacillin Based Antibiotic DCT</td>
                                <td class="header last">Blanket Antibiotic Dry Cow</td>
                            </tr>
                            <tr>
                                <td class="lightBlue">Number of clinical cases in cows in their 2nd or greater lactation (within 21 days of calving) (Runciman et al 2010)</td>
                                <td class="lightBlue last" style="text-align: right;">100</td>
                            </tr>
                            <tr>
                                <td class="blue">Cost of LC antibiotics ($)</td>
                                <td class="blue last" style="text-align: right;">3620</td>
                            </tr>
                            <tr>
                                <td class="lightBlue">Labour for clinical cases (NMAC survey 2006)($)</td>
                                <td class="lightBlue last" style="text-align: right;">987</td>
                            </tr>
                            <tr>
                                <td class="blue">Discarded milk (assuming AB milk is not fed to calves) (NMAC survey 2006)($)</td>
                                <td class="blue last" style="text-align: right;">4400</td>
                            </tr>
                            <tr>
                                <td class="lightBlue">Number of cows which have a case of mastitis in early lactation which are subsequently culled for mastitis reasons</td>
                                <td class="lightBlue last" style="text-align: right;">2</td>
                            </tr>
                            <tr>
                                <td class="blue">Cost of replacing cull cows ($)</td>
                                <td class="blue last" style="text-align: right;">2400</td>
                            </tr>
                            <tr>
                                <td class="lightBlue">Cost of Drop in production ($) (Wilson et al 2004)</td>
                                <td class="lightBlue last" style="text-align: right;">8800</td>
                            </tr>
                            <tr>
                                <td class="blue">Cost of ITS ($)</td>
                                <td class="blue last" style="text-align: right;">0</td>
                            </tr>
                            <tr>
                                <td class="lightBlue">Extra Cost of Labour to insert (extra to labour required to administer DC as normal) ($)</td>
                                <td class="lightBlue last" style="text-align: right;">0</td>
                            </tr>
                            <tr>
                                <td class="blue">Total of Actual Cost of Mastitis Occuring in the first 3 weeks of lactation ($)</td>
                                <td class="blue last" style="text-align: right;">20207</td>
                            </tr>
                            <tr>
                                <td class="lightBlue">Estimated Benefit if Blanket Combo was used last dry off Relative to the Actual this season ($)</td>
                                <td class="lightBlue last" style="text-align: right;">0</td>
                            </tr>
                        </table>
                    </div>
                </div><div data-role="page" class="data">
                    <div style="background-color: #0f0;">text2</div>
                </div><div data-role="page" class="data">
                    <div style="background-color: #00f;">text3</div>
                </div><div data-role="page" class="data">
                    <div style="background-color: #ff0;">text4</div>
                </div>
            </div>
        </div>

.blue {
    color: #57585b;
    background-color: #cde2f6;
    padding: 10px;
    font-weight: normal;
    border-right: 1px solid #fff;
}

.lightBlue {
    color: #57585b;
    background-color: #f0f0f1;
    padding: 10px;
    font-weight: normal;
    border-right: 1px solid #fff;
}

.header {
    color: #fff;
    background-color: #83c2eb;
    padding: 4px;
    text-align: center;
    border-right: 1px solid #fff;
}

.last { border-right: none; }

.data {
    width: 320px;
    margin: 0;
    display: inline-block;
}

Any other suggestions would be greatly appreicated

Eric

[Ivan K. Ivanov]

Hi Eric,

I noticed that you set a width of the table itself (to 300). In this case, you should make sure that the sum of the width of your columns is not greater that 300. If the column sum exceeds 300, the browsers shrinks the columns to fit them in the table's width. In other words, if you want to have two columns, each of which 300px in width you can do it as follows:

 

<table style="width:600px">
  <colgroup>
    <col width="300"/>
    <col width="300"/>
  </colgroup>

  <tr>
    <td>cell11</td>
    <td>cell12</td>
  </tr>
</table>

or  you you can set the widths in percents:

<table style="width:600px">
  <colgroup>
    <col width="50%"/>
    <col width="50%"/>
  </colgroup>

  <tr>
    <td>cell11</td>
    <td>cell12</td>
  </tr>
</table>

Kind regards,
Ivan K. Ivanov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[ericTheGoldfish]

Hi Ivan

We have the table width set to 300px and the cols set to 200 and 100 (which should be just smaller than the width of an iphone) but the resulting table appears to be 700px wide and spans across 3 of the scrollview pages.

I have a div tag above which is set to 320px wide and if I use percentages instead this does not change the column widths either. It seems that nothing we do to try and set this widths seems to affect them - they are made wide enough to fit the content of each cell on a single line

Eric

[Ivan K. Ivanov]

Hello Eric,

I prepared a modified version of your code sample, Please find the required changes in red in the following sample.
Briefly, the problem is that the table content is too big and the table expands to fit all the content, although you specified a width. In order to prevent this from happening you should:
1. change the default  layout of the table to fixed
2. set the overflow of the table cells to hidden and show ellipsis so the user gets aware that not all the cell content is being displayed
3. add a scroller div in each page

 

.blue, .lightBlue, .header {
    overflow:hidden;
    text-overflow: ellipsis;
}

<div id="resultsView" data-role="view" data-layout="mobile-view" data-title="Your Results">
            <div data-role="scrollview" data-page="0">
                <div data-role="page" class="data">
                    <div style="width: 320px;">
                        <div data-role="scroller" style="height:100%">
                            <table style="border-collapse: collapse; width: 300px;table-layout:fixed;">
                                <colgroup>
                                    <col width="200" />
                                    <col width="100" />
                                </colgroup>
                                <tr>
                                    <td class="header">Blanket Combo Therapy vs Blanket Cloxacillin Based Antibiotic DCT</td>
                                    <td class="header last">Blanket Antibiotic Dry Cow</td>
                                </tr>
                                <tr>
                                    <td class="lightBlue">Number of clinical cases in cows in their 2nd or greater lactation (within 21 days of calving) (Runciman et al 2010)</td>
                                    <td class="lightBlue last" style="text-align: right;">100</td>
                                </tr>
                                <tr>
                                    <td class="blue">Cost of LC antibiotics ($)</td>
                                    <td class="blue last" style="text-align: right;">3620</td>
                                </tr>
                                <tr>
                                    <td class="lightBlue">Labour for clinical cases (NMAC survey 2006)($)</td>
                                    <td class="lightBlue last" style="text-align: right;">987</td>
                                </tr>
                                <tr>
                                    <td class="blue">Discarded milk (assuming AB milk is not fed to calves) (NMAC survey 2006)($)</td>
                                    <td class="blue last" style="text-align: right;">4400</td>
                                </tr>
                                <tr>
                                    <td class="lightBlue">Number of cows which have a case of mastitis in early lactation which are subsequently culled for mastitis reasons</td>
                                    <td class="lightBlue last" style="text-align: right;">2</td>
                                </tr>
                                <tr>
                                    <td class="blue">Cost of replacing cull cows ($)</td>
                                    <td class="blue last" style="text-align: right;">2400</td>
                                </tr>
                                <tr>
                                    <td class="lightBlue">Cost of Drop in production ($) (Wilson et al 2004)</td>
                                    <td class="lightBlue last" style="text-align: right;">8800</td>
                                </tr>
                                <tr>
                                    <td class="blue">Cost of ITS ($)</td>
                                    <td class="blue last" style="text-align: right;">0</td>
                                </tr>
                                <tr>
                                    <td class="lightBlue">Extra Cost of Labour to insert (extra to labour required to administer DC as normal) ($)</td>
                                    <td class="lightBlue last" style="text-align: right;">0</td>
                                </tr>
                                <tr>
                                    <td class="blue">Total of Actual Cost of Mastitis Occuring in the first 3 weeks of lactation ($)</td>
                                    <td class="blue last" style="text-align: right;">20207</td>
                                </tr>
                                <tr>
                                    <td class="lightBlue">Estimated Benefit if Blanket Combo was used last dry off Relative to the Actual this season ($)</td>
                                    <td class="lightBlue last" style="text-align: right;">0</td>
                                </tr>
                            </table>
                            </div>
                        </div>
                </div>
                <div data-role="page" class="data">
                    <div style="background-color: #0f0;">text2</div>
                </div>
                <div data-role="page" class="data">
                    <div style="background-color: #00f;">text3</div>
                </div>
                <div data-role="page" class="data">
                    <div style="background-color: #ff0;">text4</div>
                </div>
            </div>
        </div>

Regards,
Ivan K. Ivanov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.