Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 21, 2019 at 3:38 am #1129396
    paulchiao

    Hi enfold team,

    I created a table in tabs please refer to the link in Private Content,
    but the table css is not good, its padding is too large, actually, I only need 2px 10px
    furthermore, its width is full of the whole section, I need the table width to fit the content length in cells,

    could you help me with Quick CSS? or could you let me know the CSS name which controls the table appearance.
    thanks in advance.

    August 21, 2019 at 6:46 am #1129460
    Jordan Shannon

    Hey paulchiao,

    Add this to quick css:

    #tab-id-1-container table{
width:50%important;
}

    Best regards,
    Jordan Shannon

    August 21, 2019 at 7:16 am #1129477
    paulchiao

    sorry, no changes

    August 21, 2019 at 9:01 am #1129497
    Victoria

    Hi paulchiao,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    August 23, 2019 at 7:57 am #1130230
    paulchiao

    please refer to the links in Private content.
    my website is website 1.
    there is a table in the tab section.

    I want to change the table style to a compact one like the website 2.

    actually I want all the tables (not only in tabs) in enfold theme could look like a compact style like the page in website 2

    I hope I explain it clearly.

    August 23, 2019 at 11:59 am #1130306
    Victoria

    Hi paulchiao,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.tab_content table  {
  width: 50% !important;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 23, 2019 at 12:03 pm #1130312
    paulchiao

    thanks victoria,

    can we make it fit the length of cell content automatically, please?

    August 23, 2019 at 1:26 pm #1130353
    Victoria

    Hi paulchiao,

    It is fitting right now. I am not sure what do you mean by this. Can you please explain a bit more?

    Best regards,
    Victoria

    August 23, 2019 at 1:42 pm #1130362
    paulchiao

    I mean if the content in cells is long, its width increase accordingly
    vice versa, if the content short, the cell width decrease simultaneously

    August 23, 2019 at 5:35 pm #1130431
    Victoria

    Hi paulchiao,

    I gave you the code in %, not in pixels and so it is responsive. Is it not working like that for you?

    Best regards,
    Victoria

    August 24, 2019 at 3:24 pm #1130610
    paulchiao

    I added CSS

    
td { padding: 2px 10px !important; }
table {
    width: auto !important;
}

    please refer to the link
    it seems that only padding is working, the width still 50%

    we need the width change according to the content length which is in the cells automatically

    refer to the picture

    View post on imgur.com


    we need to remove the white space in red rectangle

    I am not sure if I am answering your questions.
    please let me know if you still don’t understand me
    I am not an English native speaker, sorry.

    • This reply was modified 4 years, 7 months ago by paulchiao.
    August 29, 2019 at 10:02 am #1131833
    Basilis

    Hi,

    
table {
    width: auto !important;
max-width: 100% !important;
min-width: 100% !important;
}

    Try change the code like this and let us know if it works for what you need.

    Best regards,
    Basilis

    August 30, 2019 at 3:07 am #1132144
    paulchiao

    no changes

    August 30, 2019 at 4:17 pm #1132346
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also ensure that you are clearing the cache a few times over.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.