1

I have a table whose size changes dynamically within a fixed container, something like this: Notice the container size remains the same despite table size changing

I'm adding either 'X' or 'O' inside each cell. What I want to achieve is to not have a fixed font-size inside each cell. The font-size should dynamically change according to the cell height and width. How can I do this?

To better illustrate, please see this image below: enter image description here

My css: 

* {
margin: 0;
box-sizing: border-box;
padding: 0;
}

td {
border: 2px solid #333;
text-align: center;
vertical-align: middle;
font-family: "Comic Sans MS", sans-serif;
font-size: 16px;
font-size: 3.75vw;
cursor: pointer;
}

table {
table-layout: fixed;
border-collapse: collapse;
height: 100%;
width: 100%;
}

.tableWrapper {
width: 600px;
height: 600px;
}

table tr:first-child td {
border-top: 0;
}

table tr:last-child td {
border-bottom: 0;
}

table tr td:first-child {
border-left: 0;
}

table tr td:last-child {
border-right: 0;
}

.winner {
background-color: forestgreen;
}

.tie {
background-color: grey;
}

.endgame {
display: none;
width: 350px;
top: 120px;
background-color: rgba(205, 133, 63, 0.8);
position: absolute;
top: 38%;
left: 46%;
margin-left: -151px;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
border-radius: 5px;
color: white;
font-size: 2em;
}

HTML: 

<div class="tableWrapper">
<table>
    <tr *ngFor="let row of boardConfig">
        <td *ngFor="let cell of row" class="cell" [attr.id]="cell"></td>
    </tr>
</table>
<div class="endgame">
    <div class="text"></div>
</div>

Tony Mathew
  • 880
  • 1
  • 12
  • 35
  • I'm almost positive that this is not possible with pure CSS. You're going to need to use Javascript. – volt Jan 16 '20 at 16:48
  • @volt can you please help me with that? or do you think I should add image instead of text assuming images size can be adjusted dynamically? – Tony Mathew Jan 16 '20 at 16:50
  • An image would be much easier if that's an option. Also is the goal just to change the X/O and not the size of the numbers? – Bryce Howitson Jan 16 '20 at 16:57
  • I would suggest that you DON'T use a font to accomplish your use case. Characters aren't square in most fonts and it will end up looking silly. Instead make images with a true square x and circle... – Bryce Howitson Jan 16 '20 at 17:15

0 Answers0