I am struggling with formatting a table that has 5 columns. Two of the columns have buttons with text that needs to be translated, and the other three contain URLs. My goal is to make sure the button columns adjust to fit their content while the remaining columns share the horizontal space, even if the data is extra long and needs to be broken into multiple rows.
Fortunately, I have access to Bootstrap which may help resolve this issue.
Currently, I have attempted the following CSS code without success:
table {
table-layout: fixed;
}
th.dataColumn, td.dataColumn {
width: auto;
word-wrap: break-word;
}
th.buttonColumn, td.buttonColumn {
width: 1%;
white-space: nowrap;
}
However, removing "table-layout: fixed" from my CSS results in the table exceeding its intended width constraints.