View video tutorial
CSS in-width
CSS
The CSS min-width property is used to set the minimum width of an element.
CSS min-width property
➔ The min-width property prevents its calculated width from being smaller than a specified value.
➔ It is used to create responsive web designs that ensure that content remains in the correct view and is effective on different screen sizes.
➔ The min-width property overrides the width property if the calculated width is smaller than the specified minimum width value.
Syntax
min-width: length | initial | inherit;
Property values
| Value | Description |
|---|---|
| length | Specifies the minimum width in px, cm, etc. The default value is 0. |
| percentage | Specifies the minimum width as a percentage of the width of the containing (parent) block element. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS border collapse Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
table {
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
thead {
background-color: #107080;
color: white;
}
</style>
</head>
<body>
<h3>CSS border collapse Example</h3>
<h3>Birds Table (border-collapse: collapse;)</h3>
<table style="border-collapse: collapse;">
<thead>
<tr>
<th>Name</th>
<th>Found in significant numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bald Eagle</td>
<td>United States</td>
</tr>
<tr>
<td>Peacock</td>
<td>India</td>
</tr>
<tr>
<td>Emu</td>
<td>Australia</td>
</tr>
</tbody>
</table>
<br>
<h3>Birds Table (withoud border-collapse: collapse;)</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Found in significant numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bald Eagle</td>
<td>United States</td>
</tr>
<tr>
<td>Peacock</td>
<td>India</td>
</tr>
<tr>
<td>Emu</td>
<td>Australia</td>
</tr>
</tbody>
</table>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.