How to align cells in a table in Bootstrap 3?

Question

Bootstrap

Good time!
I create a table: a header and three columns. How to make columns equal in width?
No matter how I try, it turns out something like this:

I don’t understand what’s wrong. The code looks like this (JSP):

<table>
                                    <thead>
                                    <tr>
                                        <td class="col-md-2">
                                            <label for="station">Choose station</label>
                                        </td>
                                        <td class="col-md-2">
                                            <label for="station">Date arrival</label>
                                        </td>
                                        <td class="col-md-2">
                                            <label for="station">Date departure</label>
                                        </td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                            <%-- Choose station --%>
                                        <td class="col-md-2">
                                            <select class="form-control" id="station" name="station">
                                                <c:forEach items="${stationList}" var="station">
                                                    <option value="${station.id}"><c:out
                                                            value="${station.name}"/></option>
                                                </c:forEach>
                                            </select>
                                        </td>

                                            <%-- Date arrival --%>
                                        <td class="col-md-2">
                                            <div class="col-xs-10">
                                                <input class="form-control" type="datetime-local"
                                                       id="dateArrival">
                                            </div>
                                        </td>

                                            <%-- Date departure --%>
                                        <td class="col-md-2">
                                            <div class="col-xs-10">
                                                <input class="form-control" type="datetime-local"
                                                       id="dateDeparture">
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

Answer 1

I have never used bootstrap with tables, but I can assume that if there are 3 cells and they need to be made equal, then you should use col-md-4 instead of col-md-2