CodePen

HTML

            
              <p>Change your browser width to how custom wrapping of player names works.</p>

<p><b>Default Wrapping</b></p>
<table>
  <tr>
    <td class="name">
      Ken Bald & Malcolm Fletcher
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
  </tr>
  <tr>
    <td class="name">
      Malcolm Fletcher & Ken Bald
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
  </tr>
<table>

<p><b>Custom Wrapping</b></p>
<table>
  <tr>
    <td class="name">
      <span class="player">Ken Bald</span> & <span class="player">Malcolm Fletcher</span>
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
  </tr>
  <tr>
    <td class="name">
      <span class="player">Malcolm Fletcher</span> & <span class="player">Ken Bald</span>
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
    <td class="score">
      26
    </td>
  </tr>
<table>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body { 
  font-family: verdana;
}

table {
  border-collapse:collapse;
}

td { 
  border: 1px solid black; 
  margin: 0;
  padding: 10px;
}

.score {
  width: 5em;
  text-align: center;
}

/* 
When browser is wide enough then the
following will ensure that a player's full name is not wrapped. When the player column is displaying a double pair and wrapping is required then each player will appear on this own line.
*/
@media screen and (min-width: 44em) {
  .player { 
    white-space: nowrap;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................