HTML table - making a single column responsive - html

Question

How do I go about making the 'description' column responsive? As you can see the bootstrap description is pushing my site. I would like the description go for a specific width, and the text to go behind the 'language' and have just one horizontal scroll bar for all of the description column.
I'm using bootstrap btw so the code doesn't contain a css but maybe it helps you anyway :)
<div className="table-responsive-lg">
<table className="table table-hover text-nowrap">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Language</th>
<th scope="col">Date Created</th>
<th scope="col">File Size (kb)</th>
<th scope="col">Open Issues</th>
</tr>
</thead>
<tbody>{data.map(item => (
<tr key={item.id}>
<td><a href={item.html_url}>{item.name}</a></td>
<td>{item.description}</td>
<td>{item.language}</td>
<td>{item.created_at.slice(0,10)}</td>
<td>{item.size}</td>
<td>{item.open_issues}</td>
</tr>
))}</tbody>
</table>
</div>

Answer 1

You can define a class with some CSS as below:
.fixed-width {
width: 400px;
display: block;
overflow-x: auto;
}
then add class fixed-width to all <th> and <td> tags in your "description" column.

Answer 2

Use this CSS.
.table {border-collapse:collapse; table-layout:fixed; width:310px;}
.table td {width:100px; /*add as per your requirements*/ word-wrap:break-word;}
Using Child Pseudo Or Unique Id OR Class.
Set as per screen required. Using #media.

Answer 3

I modified the previous answer a bit and add the .fixed-width class only on the column containing the description
.fixed-width {
max-width: 400px;
display: block;
overflow-x: scroll;
}
<div className="table-responsive-lg">
<table className="table table-hover text-nowrap">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Language</th>
<th scope="col">Date Created</th>
<th scope="col">File Size (kb)</th>
<th scope="col">Open Issues</th>
</tr>
</thead>
<tbody>
<tr key="1">
<td>Google</td>
<td class="fixed-width">some looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong description here</td>
<td>English</td>
<td>19/01/2021</td>
<td>38</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>

Answer 4

You can define your css Like this:
tbody tr td:nth-child(2) {
width: 245px;
overflow-x: scroll;
max-width: 245px;
}