IcoDesign Posted August 9, 2018 Share Posted August 9, 2018 Hi there i have a question, i search a way how to make an css table wo is not symmetrically. Ohne Big column on the Left and 2 times 5 columns on the right, see attached screenshot. Is this possible? Thanks a lot for your help, and sore for my bad english :) Regards Nicole Link to comment Share on other sites More sharing options...
Funce Posted August 10, 2018 Share Posted August 10, 2018 Hi Nicole! Welcome to the forums! I looked around for you and found something that might help. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_col_width_css Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2018 Share Posted August 10, 2018 I think the confusion is that rowspan and colspan will be required in creating layouts such as this, and its not as simple as creating the same as using 3 div columns in a row, as they have to merge with other tr and td elements. https://www.w3schools.com/code/tryit.asp?filename=FU5NZOS78U5Z Link to comment Share on other sites More sharing options...
~Code&Anime~ Posted August 12, 2018 Share Posted August 12, 2018 (edited) I found it useful to learn CSS grid layout and flexbox layout. Cleaner code. Flexbox has more browser support but grid tends to have cleaner code. Edited August 12, 2018 by Ingolme Removed advertising Link to comment Share on other sites More sharing options...
Funce Posted August 14, 2018 Share Posted August 14, 2018 Following up on dsonesuk, you could combine this https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan With my previous answer, if this is your issue. Link to comment Share on other sites More sharing options...
ishan_shah Posted May 6, 2019 Share Posted May 6, 2019 (edited) Hello, You can try following code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"><br> <table class="table table-bordered"> <tbody> <tr> <th rowspan="6" style="width:400px; text-align: center; line-height: 270px" >Bootcamp Workout <th>DAUER</th> <th>PREIS</th> </th> <tr> <td>Ein</td> <td></td> </tr> <tr> <td>3</td> <td></td> </tr> <tr> <td>6</td> <td></td> </tr> <tr> <td>12</td> <td></td> </tr> <tr> <td>Fir</td> <td>Auf</td> </tr> </td> </tr> </tbody> </table> </div> </body> </html> Edited May 6, 2019 by ishan_shah Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now