CSS table 单元格放置两个按钮|极客教程

CSS table 单元格放置两个按钮

在网页开发中，通常会遇到需要在表格单元格中放置按钮的情况。有时候我们需要在一个表格单元格中放置两个按钮，这时候就需要合理地利用CSS来进行布局。本文将详细介绍如何使用CSS来实现在表格单元格中放置两个按钮。

实现思路

在实现在表格单元格中放置两个按钮时，我们通常会使用<div>元素来容纳按钮，并使用CSS来控制按钮的样式和布局。我们可以将一个<div>元素作为按钮的容器，然后在这个<div>元素中放置两个按钮。为了让两个按钮在同一行中并且居中显示，我们可以使用display: flex属性来实现水平布局。

具体的实现步骤包括：
1. 在表格单元格中创建一个<div>元素作为按钮的容器。
2. 在这个<div>元素中放置两个按钮。
3. 使用CSS控制按钮的样式和布局，包括按钮的大小、颜色、边框等。
4. 使用display: flex属性实现按钮的水平布局。

下面我们将通过示例代码来演示如何实现在表格单元格中放置两个按钮。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Table Buttons</title>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    table, th, td {
        border: 1px solid black;
    }
    td {
        padding: 10px;
        text-align: center;
    }
    .button-container {
        display: flex;
        justify-content: center;
    }
    button {
        padding: 5px 10px;
        margin: 0 5px;
        background-color: #007bff;
        color: white;
        border: 1px solid #007bff;
        border-radius: 3px;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
        border: 1px solid #0056b3;
    }
</style>
</head>
<body>

<table>
    <tr>
        <th>Name</th>
        <th>Actions</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>
            <div class="button-container">
                <button>Edit</button>
                <button>Delete</button>
            </div>
        </td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>
            <div class="button-container">
                <button>Edit</button>
                <button>Delete</button>
            </div>
        </td>
    </tr>
</table>

</body>
</html>

在上面的示例代码中，我们创建了一个包含两个按钮的表格，每个按钮都位于一个<div>元素中。通过样式表中的CSS样式，我们设置了按钮的样式，包括背景颜色、文字颜色、边框等。按钮容器的样式使用了display: flex属性，实现了按钮的水平布局并使其居中显示。