HTML equal border width and forcing line break - html

Question

I have a HTML part that looks like this:
Is it possible to have an equal border with for every word? And how can I achieve a line break after "Köln"? I tried <br/>, but it doesn't work. Something that looks like this:
Here is the HTML codepart:
function openLink(url) {
window.open(url);
}
#sideNavBox {
display: none
}
#contentBox {
margin-left: 0px
}
.dd13:hover {
cursor: pointer;
}
.dd13 {
color: #FFFFFF;
Font: 12px Arial background-color:: #48A040;
Padding: 3px 3px 3px 3px;
}
<font size="3"><b>Seminare nach Standort filtern</b></font>
<div>
<font size="3"><b><br/></b></font>
<div>
<br/>
<table class="dd13">
<tbody>
<tr>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Ulm</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Taufkirchen</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Oberkochen</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Köln</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Friedrichshafen</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Wetzlar</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Kiel</td>
</tr>
</tbody>
</table>
<p>
<br/>
</p>
<p>To register yourself to a seminar please click on this icon
<a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon
<a title="Book for me" class="book-for-user-button"></a>.<br/></p>
</div>
</div>

Answer 1

I suggest you to forget the "table" element for these cards, then try it with "span" and flexbox. you can set fixed width to it easily and it automatically breaks the line itself.
.container {
display: flex;
flex-wrap: wrap;
}
.card {
display: flex;
width: 200px;
margin: 5px;
border-radius: 4px;
background: #aaa;
border: 1px solid greenyellow;
text-align: center;
padding: 5px;
}
<div class="container">
<span class="card">example 1</span>
<span class="card">Lorem Ipsum Dolor</span>
<span class="card">example</span>
<span class="card">test</span>
<span class="card">paragraph</span>
<span class="card">Day</span>
<span class="card">Night</span>
</div>

Answer 2

Have a look at flex
Note the click below does not open a page because the stacksnippet sandbox is blocking new windows
window.addEventListener("load", function() {
document.getElementById("nav").addEventListener("click", function(e) {
var tgt = e.target;
if (tgt.classList.contains("link")) {
window.open(tgt.getAttribute("data-link"));
[...document.querySelectorAll(".link.active")].forEach(lnk => lnk.classList.remove("active"));
tgt.classList.add("active");
}
})
})
#nav {
display: flex;
flex-wrap: wrap;
flex: 1 1 0px
}
.link {
max-width: 150px;
padding: 3px;
margin: 10px;
border: 2px solid lime;
border-radius: 15px;
flex-basis: 100%;
text-align: center;
cursor: pointer;
}
.active {
background-color: lime
}
<h3><b>Seminare nach Standort filtern</b></h3>
<div id="nav">
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm">Ulm</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen">Taufkirchen</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen">Oberkochen</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln">Köln</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen">Friedrichshafen</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar">Wetzlar</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel">Kiel</div>
</div>
<div id="register">
<p>To register yourself to a seminar please click on this icon
<a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon
<a title="Book for me" class="book-for-user-button"></a>.<br/></p>
</div>

Answer 3

When you are using table, every row should be in a <tr>. So for line break it's better to add a new <tr>. and if you want to have same width for your cells, you can set width for <td>. For example:
<style>
table {
table-layout: fixed ;
width: 100% ;
}
td {
width: 25% ;
text-align: center;
color: black;
border: 3px solid limegreen;
font-size: 17px
}
</style>
and your table:
<table class="dd13">
<tbody>
<tr>
<td onclick="openLink(#);" class="dd13">Ulm</td>
<td onclick="openLink(#);" class="dd13">Taufkirchen</td>
<td onclick="openLink(#);" class="dd13">Oberkochen</td>
<td onclick="openLink(#);" class="dd13">Köln</td>
</tr>
<tr>
<td onclick="openLink(#);" class="dd13">Friedrichshafen</td>
<td onclick="openLink(#);" class="dd13">Wetzlar</td>
<td onclick="openLink(#);" class="dd13">Kiel</td>
</tr>
</tbody>
</table>