Если слово заголовка таблицы длинное и стрелка раскрывающегося списка опускается вниз

Question

Раскрывающийся список в таблице заголовков HTML

У меня проблема исправлена ​​в предыдущей ссылке. Но проблема в том, что имя заголовка моей таблицы очень длинное, поскольку заголовок таблицы и стрелка раскрывающегося списка находятся в двух строках. Я хочу, чтобы весь заголовок и стрелка раскрывающегося списка находились в одной строке.

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!--JS files-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row-fluid top-space-20">
  <div class="container col-md-offset-1">
    <h2 class="grey_text text-center">Candidates List</h2>

    <div class="row-fluid top-space-20">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Studententt ID</th>
            <th>Studententtt Name</th>
            <th>Studententt Email</th>
            <th>Studentyyyymmmm Department
              <select style="width:18px;display:inline;border:none;margin:0;" class="form-control" id="statusFilter">
                <option value="Student department">Student department</option>
                <option value="Grade CSE">CSE</option>
                <option value="Grade ECE">ECE</option>
                <option value="Grade MECH">MECH</option>

              </select>

            </th>
            <th>Student Grade List
              <select style="width:18px;display:inline;border:none;margin:0;" class="form-control" id="statusFilter">
                <option value="Student grade">Student grade</option>
                <option value="Grade A">A</option>
                <option value="Grade B">B</option>
                <option value="Grade C">C</option>
                <option value="Grade D">D</option>
                <option value="Grade E">E</option>
                <option value="Grade F">F</option>
                <option value="Grade G">G</option>
              </select>

            </th>
            <th>Actions</th>

          </tr>
        </thead>
      </table>
    </div>
  </div>

Я пробовал

<style="style="word-wrap: break-word;">
<style="word-wrap: break-word">
<style="word-break:break-all;">

в <th>, но ничего не работает.

Я пробовал еще один метод, <table style="table-layout: fixed; width: 100%"> . Я вижу, что заголовок кандидата идет в строке, но данные таблицы перекрываются. Есть ли способ обернуть заголовок HTML так, чтобы весь заголовок и выпадал в одной строке.