search

zwbetz-gh / cupper-hugo-theme

An accessibility-friendly Hugo theme, ported from the original Cupper project.
https://cupper-hugo-theme.netlify.app/
MIT License
301 stars 190 forks source link

Responsive/scrollable table. #6

Closed quentinbdno closed 5 years ago

quentinbdno commented 5 years ago

Is your feature request related to a problem? Please describe. I have a blog post with a big table (lot of text and entries). The display is chaotic with text going overthe columns.

Describe the solution you'd like I would like to add a scrollbar when the text is to large for the table.

annotation 2019-03-03 221035

I propose to add these two line to the css relative to table. 

display: block;
overflow: scroll;

So the css will be like:

table {
    text-align: left;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    display: block;
    overflow: scroll;
}

Describe alternatives you've considered A second possibility is to create a shortcode. But I don't think it's necessary.

zwbetz-gh commented 5 years ago

The current table behavior is by design. So for now it will stay as-is.

You can override the default table style in your project by copying

themes/cupper-hugo-theme/assets/css/template-styles.css

and pasting it to 

assets/css/template-styles.css

then make your changes there. Hugo will automatically use the new file because of the lookup order.