Ktash 1851

Okay so I'm having some issues with the mixing of tables and floats in different divs. I created a test page which can be viewed to see the issue of what is going on with the system now. The test page is close to how I want things to look with one exception. I want all tables to fill the whole space, minus the label on the left, except when there is a floated div. So, on my test page, tables 1, 2, and 3 all behave like they should. Table 4, however, does not. I want Table 4 to stretch to fill the remainder of the page, regardless of the width of the content.

The closest I've come so far is to set the display on the table elements to be display: block which makes the table itself extend to the proper width, but it ignores the floated div, and the content inside does not stretch to fill the table element.

Things I've tried:

  • Wrapping them in a div with position: relative and setting the width of the table to be width: 100%
  • Setting the tables to be display block

Any help is greatly appreciated,

Ktash

Update: To clarify, the actual tables are all dynamically generated so I don't know the size of each table ahead of time. And different people hitting the same page will see different content in each table, so the styles all need to be extremely fluid.

2 answers

1
point
This was chosen as the best answer

Will the tables always have 3 columns? If so, you should only need to assign a percentage width to the th elements that equals up to 100%. It would be easiest to give them all a width of 33%. Giving them different widths would require either a pseudo CSS selector, access to add a colgroup into the html of the table, or jQuery to insert class names for th1, th2, th3.

    .table_block th {
    background-color: #666666;
    color: #FFFFFF;
    width: 33%;
    }
Answered almost 6 years ago by Artistic Abode
  • You are amazing! This works perfectly. While there aren't 3 columns, it is static for each table in a set, so I can add the widths to 100. Thank you. Ktash almost 6 years ago
0
points

Tables are block elements already, so don't worry about setting those. You will have to set a class for the tables you want to be less wide than the lower ones. I made some table classes for you using percentages. Apply the half_table to the upper tables and full_tabl class to the lower tables. Also, a nice helper when styling is to apply a border of 1px solid #000 to an element to see exactly what it is doing.

                #wrapper {
                    width: 800px;
                    border: 1px solid #000000;
                    background-color: #CCDDFF;
                }
                #floater {
                    float: right;
                    border: 1px solid #999999;
                    background-color: #0099FF;
                    width: 300px;
                    margin: 10px;
                    min-height: 150px;
                }
                .table_block {
                    margin: 10px 5px;
                    width:100%;
    border:1px solid #000;
                }
                .table_block h2 {
                    width: 100px;
                    margin: 5px;
                    height: 100%;
                    float: left;
                }
                .table_block table {
                    margin-left: 110px;
                    border: 1px solid #000000;
                }
                .table_block th {
                    background-color: #666666;
                    color: #FFFFFF;
                }
    .half_table { width:40%; }
    .full_table { width:80%; }
Answered almost 6 years ago by Trevor Landau
  • Note: I left the border on your table_block class so you can see for yourself. :) Trevor Landau almost 6 years ago
  • That would be the way I would go about it if I knew which they were. All the tables are dynamically generated so I don't know which ones I would need to apply the style to. Also, tables have the display: table; property set by default, instead of the display: block; Ktash almost 6 years ago
  • Thank you for the response though :) Ktash almost 6 years ago
  • You can always wrap the dynamically generated content with an id, and set their parameters via #example table, #example tr, #example td, etc. etc. Vinny Burgh almost 6 years ago
  • I'm not sure I understand what you mean Vinny. If you're talking about giving each one a unique ID as I go and measuring that way, it'd be tough since the floated content and size of each table is dynamic each time. Ktash almost 6 years ago
  • That depends-- would you want each table to have a different style or share the same style? Vinny Burgh almost 6 years ago