I've a text in a table. When you click on this text a focus box should be displayed as close as possible around this text. With my code the displayed focus box is as wide as the table width.
How can I limit the width of the focus box to the length of the text?
Note: The text must be in that table.
I already tried:
float: left;, but then the text is no longer centered.position: absolute; left: 50%; transform: translate(-50%, 0);, but then the text isn't exactly at the same position as it was before (the text jumps around when it gets the focus) and this doesn't work in Safari.
And here's my code:
<html>
<head>
<style type = "text/css">
div:focus {
outline-width: 2px;
outline-style: dotted;
outline-color: #ff0000;
}
</style>
</head>
<body>
<table width = "800px" align = "center">
<tr align = "center">
<td>
<div tabindex = "10">Click this text. The focus box should be as close as possible around this text.</div>
</td>
</tr>
</table>
</body>
</html>