How can I create an old school table in react?-CodePudding

I would like to create a table like the expected result. Here is my code:

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);
}

Although I have set the border-collapse: separate, the output still does not change.

Expected result:

Actual Result:

The following HTML code can produce what I need.

<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>

CodePudding user response：

You didn't define height of parent so 50% doesn't know what it should refer to. Analyze the code below. It creates what you want

.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;
}

CodePudding user response：

2 things, your .calendarTableContainer doesn't have any height, and you want to add a border to the td im assuming.

So to fix this, I added a simply hieght of 500px to.calendarTableContainer (for example purposes)

then added this to the CSS

.calendarTable td {
    border: 1px inset black;
}

Here's a working example:

.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 >
            <table >
                <tr><td></td><td></td></tr>
                <tr><td></td><td></td></tr>
            </table>
        </div>

CodePudding user response：

Simply setting the old-school border value on a table yields the result you want.

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>

If you don't want to use that, then you'll need to emulate the similar styles with inset and outset borders.

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 grey;
}
table td {
  border: 1px inset grey;
}

<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>