我想創建一個像預期結果一樣的表。這是我的代碼：
import "./CalendarTable.css";
export default function CalendarTable() {
return (
<div className="calendarTableContainer">
<table className="calendarTable">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
)
}.calendarTable {
font-size: 13px;
text-align: center;
width: 50%;
margin: auto;
border: 1px solid black;
border-collapse: separate;
border-spacing: 2px;
height: 50%;
}
.calendarTableContainer {
margin: 3px;
width: calc(100% - 6px);
}雖然我設定了border-collapse:separate，但輸出還是沒有改變。
預期結果：
實際結果：
下面的 HTML 代碼可以產生我需要的東西。
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<table border="1" height="50%" width="50%">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</body>
</html> uj5u.com熱心網友回復：
只需在 a 上設定老式border值即可table產生您想要的結果。
function CalendarTable() {
return (
<table border={1}>
<tr><td>a</td><td>b</td></tr>
<tr><td>c</td><td>d</td></tr>
</table>
)
}
ReactDOM.render(<CalendarTable />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>如果您不想使用它，那么您需要使用嵌入和開始邊界來模擬類似的樣式。
function CalendarTable() {
return (
<table>
<tr><td>a</td><td>b</td></tr>
<tr><td>c</td><td>d</td></tr>
</table>
)
}
ReactDOM.render(<CalendarTable />, document.getElementById("root"));table {
border-collapse: separate;
border: 1px outset;
}
table td {
border: 1px inset;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
你沒有定義父母的高度，所以 50% 不知道它應該指什么。分析下面的代碼。它創造你想要的
.calendarTableContainer {
width: calc(100% - 6px);
height:100vh;
}
.calendarTable {
font-size: 20px;
text-align: center;
width: 50%;
margin: auto;
border: 1px solid black;
border-spacing: 2px;
height: 50%;
}
td{
border:1px solid black;
}uj5u.com熱心網友回復：
兩件事，你.calendarTableContainer沒有任何高度，你想給我添加一個邊框td。
所以為了解決這個問題，我添加了一個簡單的500pxto .calendarTableContainer（例如目的）
然后將此添加到CSS
.calendarTable td {
border: 1px inset black;
}
這是一個作業示例：
.calendarTable {
font-size: 13px;
text-align: center;
width: 50%;
margin: auto;
border: 1px solid black;
border-collapse: separate;
border-spacing: 2px;
height: 50%;
}
.calendarTableContainer {
margin: 3px;
width: calc(100% - 6px);
height: 500px;
}
.calendarTable td {
border: 1px inset black;
}<div class="calendarTableContainer">
<table class="calendarTable">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/506635.html
標籤：javascript html css 反应