How to apply CSS specific on several tables ?

Problem

Our website did not look nice because of a CSS problem.
Indeed some data on one row of a table was scrollable.
The data of one row would overflow.

How to stop this data to be scrollable on one line ?
The goal was to present the information in several lines instead of one line. The solution to this first problem was to modify the table-layout for the CSS element table to “fixed” property.


table {
    border-collapse: collapse;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    width: 98%;

    table-layout: fixed;
}

Unfortunalely because of this global modification of CSS another problem popped up in a diffrent webpage :

display_problem

The solution for this second problem was to make the CSS table tag to this configuration :

table-layout: auto

Auto layout is the default property for most of the tables of my website in CSS.The auto property adapts the table layout to all different browers which is practical. But how can we apply specific CSS properties to specific tables ?

This link help me to apply specific CSS to one specific table using id :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_id1

Solution

This is the html page where we had a scrollable/overflow initial problem :

<table id="my_tableA_X" class="result ">
<table id="my_tableA_Y" class="result ">
<table id="my_tableA_Z" class="result ">

my_tableA_Y is having the scrollable/overflow problem. But I want also all other tables (starting with my_tableA) to have a similar look. Therefore i  will  apply the same CSS properties to all tables with id starting  by “my_tableA”. Regex is used to achieve this inside CSS file :

https://stackoverflow.com/questions/11496645/how-to-get-css-to-select-id-that-begins-with-a-string-not-in-javascript

The solution to the two problems :

table[id^=my_tableA]{
    border-collapse: collapse;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    margin-top: 5px;
    width: 98%;    

    table-layout: fixed;
}

table {
    border-collapse: collapse;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    width: 98%;

    table-layout: auto;
}

Now all table which start with an id my_tableA have the same layout and columns have same size , width, etc… This solution fixed the problem. The second table CSS tag indicates that other tables will have auto layout.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s