Table width
-
I’m using Tablepress to display a large table with a number of columns.
I’d like to keep the pagination feature and the sort feature that the DataTables Javascript library provides; however, when using CSS to set the width: 100%; and left/right-margin: auto; it does not work while the Javascript is enabled.
The only way that the table does work with the above CSS code is when the Datatables Javascript is disabled, and in this case all the rows are displayed at once, which makes the website look cumbersome as there are up to hundreds of rows. It also cuts off a portion of the columns.
With the Javascript library enabled, the table width is only a portion of the browser length when I would like to have the table width be almost the length of the browser.
-
https://ffpredictor.thefantasytakeaway.com/quarterback-projections/
Currently the table is not responsive to window size if I adjust browser to be smaller than the table. The scroll bar doesnt scroll all the way to the end column. The other tables on the website seem to have their scroll function working properly (you can check them by clicking the links at the top of the website). However, those blocks are setup not using “column” at wide-width where 1 column is set to 100% width like the quarterback table above. This is my custom CSS code.tablepress-id-all {
}.tablepress thead th,
.tablepress tbody td {
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
padding-right: 0;
}.tablepress thead th {
background: linear-gradient(#646464 15%,#F9F9F9);
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
color: #000000;
}.tablepress tfoot td,
.tablepress tfoot th {
color: #C0C0C0;
}.tablepress tbody td {
background: linear-gradient(#063694 15%,#6599FF);
font-family: Tahoma;
font-size: 11px;
color: #C0C0C0;
}.dataTables_wrapper label input,
.dataTables_wrapper label select {
width: 50%;
}.dataTables_paginate.paging_simple {
padding: 0 50px;
padding-top: 0;
padding-right: 50px;
padding-bottom: 0;
padding-left: 50px;
}.dataTables_paginate a {
color: #f9f9f9 !important;
display: inline-block;
outline: 0;
position: relative;
left: 25%;
text-decoration: underline;
}.dataTables_scroll {
clear: both;
}The pagination width and the select/input, and table title, all seem to fit to the full width of the block.
I achieved this by altering block width under “pages” in word press. Then entered a shortcode in a column within the block, and adjusted the column width to 100%.
However, the table width is still too short on desktop/laptop. It fills the width on a smaller screen like a phone, but I’d like it to also fill the width of a larger screen. Is there any way to achieve this? I’ve tried centering the table by changing .dataTables_scroll to
.dataTables_scroll {
clear: both;
position: relative;
left: 25%;
}
However, this, as well as trying “width: 100%;”, makes the table unresponsive and begins cutting off on smaller screens. Also doesn’t match the pagination and select/search at the top. Is it possible to stretch the table to where “search” is? Or, if not, anyway to set it so “search” is always lined up with the right end of the table? And then center the in the middle of the page while keeping it responsive to screen size?At the top of the page of the link posted, you can also check other tables by clicking “Runningback Projections”, “Wide Receiver Projections”, etc…
The other tables use the normal shortcode block their pages, where the block width is not set to “wide width” via columns. Although centered, they are much smaller in width in comparison to the browser width.
Thank you that helped stretch the table.
I’m just encountering one more issue now, when I enable “horizonal scrolling” in the DataTables Javascript option for a table, the table does not stretch all the way to the right, although the pagination bars will.
If it is disables, the table will stretch all the way to fill the screeen where the pagination is.
I’ve left Quarterback Projections with the enabled “horizontal scrolling” via DataTables option so you could see.
I wanted to leave this item enabled so I can also use the fixed column plugin if the table columns begin to get larger and the user needs to scroll the table and not the browser.
Thanks againIt seems the tables do not expand fully when “horizontal scrolling” is enabled via DataTables Javascript library options. Quarterback Projections on the link above has “horizontal scrolling” enabled. I was able to fix this once by toggling the option off, and then back on. However, when I tried using “Fixed Columns Extension” it actually just reverted everything back to a smaller width.
There was another issue I had noticed with “fixedcolumn” as well. The fixed column did not scale correctly, the text in the table cells of the fixed column began to get cut off when making the window smaller.
I’ve tried padding the table body using padding-right but this didnt fix my issue.
It also seems to break the table’s ability to expand to the width of the content.I removed the extension for now so you could see the issue with enabled “horizontal scrolling” options on Quarterbacks first.
Thanks for your help
I believe that fixed the issue, will try on my larger screen later and will make a new reply if any issues arise. Thanks!
I’ve noticed that fixedheader and fixedcolumn extensions do not work simultaneously.
At the moment I only have fixedcolumn activated as I tried setting the width of the fix column to 100% with.tablepress-id-all .column-1 {
width: 100%;
}
But I’m guess this only applies to the column when it is static due to the following reason.The fixed column displays correctly before scrolling horizontally. However,
when you scroll horizontally, the fixed column will have part of the data cutoff.
Is there anyway to adjust the width of the fixed column as well?The fixed header display will not scroll with the columns when you scroll horizontally.
Also, thank you for all the help so far! The table looks far better than before.
The topic ‘Table width’ is closed to new replies.
