Ask Question

Menu

How to create a responsive table in HTML and CSS


responsive-table.html

<!DOCTYPE html>
<html>
<head>
<title>Responsive table</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #blue;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td>1</td>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
<tr>
<td>2</td>
<td>Dhoni</td>
<td>Ranchi</td>
</tr>
<tr>
<td>3</td>
<td>Kohili</td>
<td>Delhi</td>
</tr>
<tr>
<td>4</td>
<td>Yuvraj</td>
<td>Punjab</td>
</tr>
<tr>
<td>5</td>
<td>Raina</td>
<td>Chennai</td>
</tr>
<tr>
<td>6</td>
<td>Rohit</td>
<td>Mumbai</td>
</tr>
</table>
</form>
</body>
</html>

Output

Responsive table
1 Sachin Mumbai
2 Dhoni Ranchi
3 Kohili Delhi
4 Yuvraj Punjab
5 Raina Chennai
6 Rohit Mumbai






Subscribe with us to get latest topic update






Choose a Language



Subscribe